/* /public/css/pwaInstallInfo.css */


button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  padding:0;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

button{
  background:var(--bg-menubutton);
  color:var(--text-main);
}

button:active {
  transform: none;
  background:var(--bg-button-active) !important;
  color:var(--text-button-active) !important;
}

.button-has-set-icon {
  border: 0 !important;
  border-radius: 999px;
  background:transparent;
}

.button-has-set-icon:hover{
  background: var(--bg-button-hover);
}







/* =========================================================
   PWA INSTALL INFO
   Ortak kullanım:
   - #pwaInstallInfoRoot
   - #app1PwaInstallInfoRoot
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
) {
  position: fixed;
  inset: 0;

  z-index: var(--zindex-modal, 99999);

  width: 100%;
  height: var(
    --app1-viewport-height,
    100vh
  );

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    calc(
      1rem +
      var(--app1-device-safe-top, 0px)
    )
    calc(
      1rem +
      var(--app1-device-safe-right, 0px)
    )
    calc(
      1rem +
      var(--app1-device-safe-bottom, 0px)
    )
    calc(
      1rem +
      var(--app1-device-safe-left, 0px)
    );

  overflow: hidden;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  box-sizing: border-box;
}

/* =========================================================
   KAPANIŞ DURUMU
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
).is-closing {
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 180ms ease;
}

/* =========================================================
   BACKDROP
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-backdrop {
  position: absolute;
  inset: 0;

  z-index: 0;

  display: block;

  background:
    var(
      --bg-main-transparent,
      rgba(0, 0, 0, 0.68)
    );

  backdrop-filter: blur(0.55rem);
  -webkit-backdrop-filter: blur(0.55rem);

  opacity: 1;
  visibility: visible;
}

/* =========================================================
   PANEL
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-panel {

  outline:none;
  position: relative;
  z-index: 1;

  width: min(100%, 38rem);
  max-height: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    var(--border-soft);

  border-radius: 1.5rem;

  background: var(--bg-surface);
  color: var(--text-main);

  box-shadow:
    var(
      --shadow-heavy,
      0 2rem 5rem rgba(0, 0, 0, 0.42)
    );

  box-sizing: border-box;

  animation:
    app1PwaInfoPanelIn
    200ms
    ease-out;
}

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
).is-closing
.app1-pwa-info-panel {
  animation:
    app1PwaInfoPanelOut
    180ms
    ease-in
    forwards;
}

/* =========================================================
   HEADER
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-header {
  position: relative;

  flex: 0 0 auto;

  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 1rem;

  padding: 1.35rem 3.75rem 1.35rem 1.35rem;

  border-bottom:
    1px solid
    var(--border-soft);

  background: var(--bg-header);

  box-sizing: border-box;
}

/* =========================================================
   BRAND / UYGULAMA İKONU
   ========================================================= */

.app1-pwa-info-brand {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 1rem;

  flex: 1;
}

.app1-pwa-info-app-icon,
.app1-pwa-info-icon {
  width: 3.5rem;
  height: 3.5rem;

  flex: 0 0 3.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid
    var(--border-soft);

  border-radius: 1rem;

  color: var(--text-main);
  background: var(--bg-menubutton);

  box-shadow:
    0 0.5rem 1.25rem
    rgba(0, 0, 0, 0.12);

  box-sizing: border-box;
}

.app1-pwa-info-app-icon img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.app1-pwa-info-app-icon svg,
.app1-pwa-info-icon svg {
  width: 1.65rem;
  height: 1.65rem;

  display: block;
}

/* =========================================================
   BAŞLIK ALANI
   ========================================================= */

.app1-pwa-info-title-wrap {
  min-width: 0;

  flex: 1;
}

.app1-pwa-info-badge {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 1.55rem;

  margin-bottom: 0.55rem;
  padding: 0.15rem 0.55rem;

  border:
    1px solid
    var(--border-soft);

  border-radius: 999rem;

  color: var(--text-secondary);
  background: var(--bg-card-hover);

  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app1-pwa-info-title {
  margin: 0;

  color: var(--text-main);

  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.3;
}

.app1-pwa-info-subtitle {
  margin-top: 0.4rem;

  max-width: 30rem;

  color: var(--text-secondary);

  font-size: 0.84rem;
  line-height: 1.5;
}

/* =========================================================
   KAPAT BUTONU
   ========================================================= */

.app1-pwa-info-close-button {
  position: absolute;

  top: 1rem;
  right: 1rem;

  width: 2.4rem;
  height: 2.4rem;

  
}


/* =========================================================
   BODY
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-body {
  flex: 1 1 auto;

  min-height: 0;

  padding: 1.25rem;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--bg-surface);

  box-sizing: border-box;
}

/* =========================================================
   PLATFORM ROZETİ
   ========================================================= */

.app1-pwa-info-platform {
  width: fit-content;

  display: inline-flex;
  align-items: center;

  min-height: 2rem;

  margin-bottom: 1rem;
  padding: 0.35rem 0.75rem;

  border:
    1px solid
    var(--border-soft);

  border-radius: 999rem;

  color: var(--text-secondary);
  background: var(--bg-main);

  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.2;
}

/* =========================================================
   AVANTAJ KARTLARI
   ========================================================= */

.app1-pwa-info-benefits {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0.7rem;

  margin-bottom: 1.25rem;
}

.app1-pwa-info-benefit {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 0.65rem;

  padding: 0.9rem;

  border:
    1px solid
    var(--border-soft);

  border-radius: 1rem;

  background: var(--bg-card-hover);

  box-sizing: border-box;
}

.app1-pwa-info-benefit-icon {
  width: 2rem;
  height: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 2rem;

  border-radius: 0.65rem;

  color: var(--text-main);
  background: var(--bg-menubutton);
}

.app1-pwa-info-benefit-icon svg {
  width: 1.5rem;
  height: 1.5rem;

  display: block;
}

.app1-pwa-info-benefit strong {
  display: block;

  color: var(--text-main);

  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
}

.app1-pwa-info-benefit span {
  display: block;

  margin-top: 0.2rem;

  color: var(--text-secondary);

  font-size: 0.7rem;
  line-height: 1.4;
}

/* =========================================================
   KURULUM REHBERİ
   ========================================================= */

.app1-pwa-info-guide {
  padding: 1rem;

  border:
    1px solid
    var(--border-soft);

  border-radius: 1.1rem;

  background: var(--bg-main);

  box-sizing: border-box;
}

.app1-pwa-info-guide-title {
  margin-bottom: 0.9rem;

  color: var(--text-main);

  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

/* =========================================================
   ADIMLAR
   ========================================================= */

.app1-pwa-info-steps {
  position: relative;

  display: grid;

  gap: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}

.app1-pwa-info-steps li {
  position: relative;

  min-width: 0;

  display: grid;
  grid-template-columns:
    2rem minmax(0, 1fr);

  gap: 0.8rem;

  padding-bottom: 1rem;
}

.app1-pwa-info-steps li:last-child {
  padding-bottom: 0;
}

.app1-pwa-info-steps li:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 2rem;
  bottom: 0;
  left: 0.95rem;

  width: 1px;

  background: var(--border-soft);
}

.app1-pwa-info-step-number {
  position: relative;
  z-index: 1;

  width: 2rem;
  height: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    var(--border-soft);

  border-radius: 999rem;

  color: var(--text-main);
  background: var(--bg-button);

  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

.app1-pwa-info-step-content {
  min-width: 0;

  padding-top: 0.1rem;
}

.app1-pwa-info-steps strong {
  display: block;

  color: var(--text-main);

  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.app1-pwa-info-steps p {
  margin: 0.25rem 0 0;

  color: var(--text-secondary);

  font-size: 0.75rem;
  line-height: 1.5;
}

/* Eski JS yalnız düz metin üretirse uyumluluk */
.app1-pwa-info-steps li:not(:has(
  .app1-pwa-info-step-number
)) {
  display: list-item;

  margin-left: 1.25rem;
  padding-bottom: 0.6rem;

  color: var(--text-main);

  font-size: 0.84rem;
  line-height: 1.5;

  list-style: decimal;
}

.app1-pwa-info-steps li:not(:has(
  .app1-pwa-info-step-number
))::after {
  display: none;
}

/* =========================================================
   BİLGİ NOTU
   ========================================================= */

.app1-pwa-info-note {
  display: flex;
  align-items: flex-start;

  gap: 0.65rem;

  margin-top: 1rem;
  padding: 0.85rem;

  border:
    1px solid
    var(--border-soft);

  border-radius: 0.9rem;

  color: var(--text-secondary);
  background: var(--bg-card-hover);

  font-size: 0.76rem;
  line-height: 1.5;

  box-sizing: border-box;
}

.app1-pwa-info-note-icon {
  width: 1.65rem;
  height: 1.65rem;

  flex: 0 0 1.65rem;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0.55rem;

  color: var(--text-secondary);
  background: var(--bg-menubutton);
}

.app1-pwa-info-note-icon svg {
  width: 0.95rem;
  height: 0.95rem;

  display: block;
}

.app1-pwa-info-note p {
  margin: 0;
}

/* Eski JS yalnız metin üretiyorsa */
.app1-pwa-info-note:not(:has(
  .app1-pwa-info-note-icon
)) {
  display: block;
}

/* =========================================================
   FOOTER
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-footer {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  padding:
    1rem
    1.25rem;

  border-top:
    1px solid
    var(--border-soft);

  background: var(--bg-header);

  box-sizing: border-box;
}

/* =========================================================
   BUTONLAR
   ========================================================= */

.app1-pwa-info-ok-button,
.app1-pwa-info-install-button,
.app1-pwa-info-secondary-button {
  min-height: 2.75rem;
  min-width:140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 1.1rem;

  border:
    1px solid
    var(--border-soft);

  border-radius: 0.85rem;

  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

}

.app1-pwa-info-ok-button,
.app1-pwa-info-install-button {
  color: var(--text-main);
  background: var(--bg-button);
}

.app1-pwa-info-secondary-button {
  color: var(--text-main);
  background: var(--bg-warning);
}

.app1-pwa-info-ok-button:active,
.app1-pwa-info-install-button:active,
.app1-pwa-info-secondary-button:active {
  transform: scale(0.97);
}

/* =========================================================
   FOCUS
   ========================================================= */

.app1-pwa-info-close-button:focus-visible,
.app1-pwa-info-ok-button:focus-visible,
.app1-pwa-info-install-button:focus-visible,
.app1-pwa-info-secondary-button:focus-visible {
  outline:
    2px solid
    var(--text-main);

  outline-offset: 2px;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-body {
  scrollbar-width: thin;
  scrollbar-color:
    var(--border-soft)
    transparent;
}

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-body::-webkit-scrollbar {
  width: 0.4rem;
}

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-body::-webkit-scrollbar-track {
  background: transparent;
}

:is(
  #pwaInstallInfoRoot,
  #app1PwaInstallInfoRoot
)
.app1-pwa-info-body::-webkit-scrollbar-thumb {
  border-radius: 999rem;
  background: var(--border-soft);
}

/* =========================================================
   ANİMASYONLAR
   ========================================================= */

@keyframes app1PwaInfoPanelIn {
  from {
    opacity: 0;

    transform:
      translateY(0.85rem)
      scale(0.975);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes app1PwaInfoPanelOut {
  from {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

  to {
    opacity: 0;

    transform:
      translateY(0.6rem)
      scale(0.98);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 42rem) {
  .app1-pwa-info-benefits {
    grid-template-columns: 1fr;
  }

  .app1-pwa-info-benefit {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 48rem) {
  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  ) {
    align-items: center;

    padding:
      calc(
        0.75rem +
        var(--app1-device-safe-top, 0px)
      )
      calc(
        0.65rem +
        var(--app1-device-safe-right, 0px)
      )
      calc(
        0.65rem +
        var(--app1-device-safe-bottom, 0px)
      )
      calc(
        0.65rem +
        var(--app1-device-safe-left, 0px)
      );
  }

  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  )
  .app1-pwa-info-panel {
    width: 100%;
    max-height: 100%;

    border-radius: 1.3rem;
  }

  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  )
  .app1-pwa-info-header {
    gap: 0.8rem;

    padding:
      1.1rem
      3.45rem
      1.1rem
      1rem;
  }

  .app1-pwa-info-brand {
    gap: 0.8rem;
  }

  .app1-pwa-info-app-icon,
  .app1-pwa-info-icon {
    width: 3rem;
    height: 3rem;

    flex-basis: 3rem;

    border-radius: 0.85rem;
  }

  .app1-pwa-info-close-button {
    top: 0.85rem;
    right: 0.85rem;

    width: 2.3rem;
    height: 2.3rem;
  }

  .app1-pwa-info-title {
    font-size: 1rem;
  }

  .app1-pwa-info-subtitle {
    font-size: 0.78rem;
  }

  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  )
  .app1-pwa-info-body {
    padding: 1rem;
  }

  .app1-pwa-info-platform {
    margin-bottom: 0.85rem;
  }

  .app1-pwa-info-benefits {
    gap: 0.6rem;

    margin-bottom: 1rem;
  }

  .app1-pwa-info-benefit {
    padding: 0.8rem;
  }

  .app1-pwa-info-guide {
    padding: 0.9rem;
  }

  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  )
  .app1-pwa-info-footer {
    flex-direction: column-reverse;
    align-items: stretch;

    padding:
      0.85rem
      1rem
      calc(
        0.85rem +
        var(--app1-device-safe-bottom, 0px)
      );
  }

  .app1-pwa-info-ok-button,
  .app1-pwa-info-install-button,
  .app1-pwa-info-secondary-button {
    width: 100%;
    min-height: 2.85rem;
  }
}

/* =========================================================
   KÜÇÜK MOBİL
   ========================================================= */

@media (max-width: 23rem) {
  .app1-pwa-info-app-icon,
  .app1-pwa-info-icon {
    width: 2.65rem;
    height: 2.65rem;

    flex-basis: 2.65rem;
  }

  .app1-pwa-info-title {
    font-size: 0.94rem;
  }

  .app1-pwa-info-subtitle {
    font-size: 0.73rem;
  }

  .app1-pwa-info-badge {
    font-size: 0.58rem;
  }
}

/* =========================================================
   AZALTILMIŞ HAREKET
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  ),
  :is(
    #pwaInstallInfoRoot,
    #app1PwaInstallInfoRoot
  )
  .app1-pwa-info-panel,
  .app1-pwa-info-close-button,
  .app1-pwa-info-ok-button,
  .app1-pwa-info-install-button,
  .app1-pwa-info-secondary-button {
    animation: none;
    transition: none;
  }
}

.ozel-icon-boyut svg{
  height: 1rem;
  width:1rem;
}