.brand-browser { position: relative; overflow: hidden; }
.brand-browser .brand-back { position: absolute; top: 24px; right: 24px; z-index: 2; }

/* Bütün geri dönüşler aynı, sade ve üç boyutlu düğmeyi kullanır. */
.back-button {
  min-height: 42px; padding: 9px 19px !important; border: 1px solid #237bd2 !important;
  border-radius: 13px !important; color: #fff !important; font-size: 14px; font-weight: 850;
  letter-spacing: .01em; text-decoration: none !important; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.27), transparent 46%), linear-gradient(145deg,#2a8bed,#0758b1) !important;
  box-shadow: 0 5px 0 #064482, 0 10px 18px rgba(7,73,142,.22), inset 0 1px 0 rgba(255,255,255,.68) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.back-button:hover, .back-button:focus-visible {
  transform: translateY(-2px); filter: brightness(1.04); outline: none;
  box-shadow: 0 7px 0 #064482, 0 14px 23px rgba(7,73,142,.27), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.back-button:active {
  transform: translateY(4px); box-shadow: 0 1px 0 #064482, 0 5px 9px rgba(7,73,142,.18), inset 0 2px 6px rgba(0,0,0,.16) !important;
}

/* Marka düğmeleri: tek parça, cam parlaklığında ve gerçek basma hissi veren yapı. */
.brand-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 180px)); justify-content: center;
  gap: 18px; margin-top: 26px; padding: 4px 5px 10px;
}
.brand-grid .brand-card {
  --brand-top: #6082a7; --brand-bottom: #263e59; --brand-edge: #14263a; --brand-text: #fff;
  position: relative; isolation: isolate; overflow: hidden; min-height: 52px; padding: 8px 14px;
  appearance: none; border: 1px solid rgba(255,255,255,.64) !important; border-radius: 16px !important;
  color: var(--brand-text) !important; cursor: pointer; display: grid !important; place-items: center !important;
  grid-template-columns: 1fr !important; text-align: center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.10) 43%, rgba(0,0,0,.14) 48%, rgba(0,0,0,.04) 100%),
    linear-gradient(145deg, var(--brand-top), var(--brand-bottom) 76%) !important;
  box-shadow:
    0 5px 0 var(--brand-edge), 0 10px 17px rgba(8,21,37,.28),
    inset 0 2px 1px rgba(255,255,255,.72), inset 0 -2px 5px rgba(0,0,0,.28) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.brand-grid .brand-card::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 3px 6px auto; height: 46%; border-radius: 12px 12px 48% 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.04));
}
.brand-grid .brand-card::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: 10%; right: 10%; bottom: -11px; height: 15px; border-radius: 50%;
  background: rgba(5,15,28,.38); filter: blur(8px);
}
.brand-shine {
  position: absolute; top: -75%; left: -28%; width: 30%; height: 250%; pointer-events: none;
  transform: rotate(24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition: left .45s ease;
}
.brand-grid .brand-card strong {
  position: relative; font-size: clamp(18px, 2vw, 22px); line-height: 1; font-weight: 700;
  letter-spacing: -.035em; color: currentColor; text-shadow: 0 2px 4px rgba(0,0,0,.44);
}
.brand-grid .brand-card:hover, .brand-grid .brand-card:focus-visible {
  transform: translateY(-4px); filter: saturate(1.08) brightness(1.04); outline: none;
  box-shadow: 0 7px 0 var(--brand-edge), 0 15px 24px rgba(8,21,37,.34), inset 0 2px 1px rgba(255,255,255,.78), inset 0 -2px 5px rgba(0,0,0,.28) !important;
}
.brand-card:hover .brand-shine, .brand-card:focus-visible .brand-shine { left: 112%; }
.brand-grid .brand-card:active {
  transform: translateY(4px); filter: brightness(.97);
  box-shadow: 0 1px 0 var(--brand-edge), 0 5px 9px rgba(8,21,37,.22), inset 0 2px 7px rgba(0,0,0,.28) !important;
}

/* Onaylanan Samsung seri düğmeleri aynı tasarımda korunur. */
.series-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.series-filters[hidden] { display: none; }
.series-filter {
  min-height: 40px; padding: 9px 16px; border: 1px solid #cfddeb; border-radius: 999px;
  background: linear-gradient(#fff,#edf4fb); color: #31455e; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 0 #d8e3ee; transition: .16s ease;
}
.series-filter:hover, .series-filter:focus-visible { transform: translateY(-2px); border-color: #7eb8f7; outline: none; }
.series-filter.active {
  background: linear-gradient(145deg,#2385ed,#075dbd); color: #fff; border-color: #0b66c8;
  box-shadow: 0 4px 0 #084d96, 0 8px 16px rgba(14,100,194,.18);
}

/* Model düğmeleri: bütün ikon ve adlar aynı sol çizgide; yardımcı yazı ve ok yok. */
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 26px; }
.model-grid .model-card {
  position: relative; overflow: hidden; min-height: 94px; padding: 14px 18px; border: 1px solid #cdddeb;
  border-radius: 19px; color: var(--ink); cursor: pointer; text-align: left;
  display: grid !important; place-items: center stretch !important; grid-template-columns: 1fr !important;
  background: linear-gradient(160deg, #ffffff 0%, #eef6ff 54%, #e3effb 100%) !important;
  box-shadow: 0 6px 0 #cbddeb, 0 12px 22px rgba(18,71,126,.12), inset 0 1px 0 #fff, inset 0 -2px 5px rgba(36,91,145,.08) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.model-card::before {
  content: ""; position: absolute; inset: 3px 6px auto; height: 42%; pointer-events: none;
  border-radius: 15px 15px 45% 45%; background: linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0));
}
.model-card-center { position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.model-device {
  flex: 0 0 auto; width: 28px; height: 45px; border: 2px solid #1473e6; border-radius: 7px; padding: 3px;
  display: block; box-shadow: 3px 3px 0 #bdd9f6, inset 0 0 0 1px rgba(255,255,255,.8);
}
.model-device > span { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(145deg, #1476df, #80ceff); }
.model-card strong { font-size: 16px; line-height: 1.2; font-weight: 800; }

/* Model ekranında marka adı başlığın gerçek bir parçası gibi okunur. */
.model-heading { padding-right: 132px; }
.model-heading #selectedBrand {
  margin-bottom: 4px; color: #173a61; font-size: 15px; line-height: 1.1; font-weight: 900;
  letter-spacing: .045em; text-transform: none;
}
.model-heading h2 { font-weight: 850; }
.model-grid .model-card:hover, .model-grid .model-card:focus-visible {
  transform: translateY(-3px); border-color: #65aaf0; outline: none;
  background: linear-gradient(160deg, #fff, #e6f3ff 58%, #d8eaff);
  box-shadow: 0 9px 0 #bcd5ed, 0 18px 28px rgba(18,91,164,.18), inset 0 1px 0 #fff !important;
}
.model-grid .model-card:active { transform: translateY(4px); box-shadow: 0 2px 0 #c3d8eb, 0 7px 13px rgba(18,71,126,.13), inset 0 2px 6px rgba(37,92,145,.12) !important; }

/* Teknik Malzemeler ana girişi de aynı temiz üç boyutlu dilde. */
.technical-button-3d {
  position: relative; overflow: hidden; min-height: 72px; padding: 16px 28px !important;
  display: grid !important; place-items: center !important; grid-template-columns: 1fr !important;
  border: 1px solid #4f8fd0 !important; border-radius: 20px !important; color: #fff !important; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.27), transparent 45%), linear-gradient(145deg,#2785e4,#0755aa) !important;
  box-shadow: 0 7px 0 #073d7a, 0 14px 24px rgba(8,69,132,.22), inset 0 1px 0 rgba(255,255,255,.65) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}
.technical-button-3d::before { content: ""; position: absolute; inset: 4px 8px auto; height: 42%; border-radius: 15px 15px 45% 45%; background: linear-gradient(rgba(255,255,255,.34),transparent); pointer-events: none; }
.technical-button-3d strong { position: relative; font-size: 18px; font-weight: 850; text-align: center; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.25); }
.technical-button-3d small { display: none !important; }
.technical-button-3d:hover, .technical-button-3d:focus-visible { transform: translateY(-3px); outline: none; box-shadow: 0 10px 0 #073d7a, 0 20px 30px rgba(8,69,132,.27), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.technical-button-3d:active { transform: translateY(5px); box-shadow: 0 2px 0 #073d7a, 0 7px 12px rgba(8,69,132,.18), inset 0 2px 7px rgba(0,0,0,.18) !important; }

@media (max-width: 760px) {
  .brand-browser .brand-back { position: static; display: block; margin: 0 0 18px auto; }
  .brand-browser .brand-back[hidden] { display: none; }
  .brand-grid { grid-template-columns: repeat(2, minmax(130px, 160px)); justify-content: center; gap: 14px; }
  .brand-grid .brand-card { min-height: 52px; border-radius: 16px !important; }
  .brand-grid .brand-card strong { font-size: clamp(17px, 5vw, 21px); }
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .technical-access-row { gap: 20px; }
  .model-heading { padding-right: 0; }
}

@media (max-width: 420px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid .brand-card { min-height: 50px; }
  .model-grid { grid-template-columns: 1fr; }
  .model-card { min-height: 80px; }
  .technical-access-row { grid-template-columns: 1fr !important; }
  .technical-button-3d { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-card, .brand-shine, .model-card, .series-filter, .technical-button-3d, .back-button { transition: none; }
}