/* Med-SEM one-page theme (navy / red / white) + dark mode
   Note: This file overrides some Bootstrap colors via CSS variables. */

:root{
  --brand-navy: #0b1f3a;
  --brand-navy-2: #08172b;
  --brand-red: #e11d2e;
  --brand-red-2: #b81423;

  --radius-xl: 1.25rem;

  --bs-primary: var(--brand-red);
  --bs-link-color: var(--brand-red);
  --bs-link-hover-color: var(--brand-red-2);
}

/* Dark mode tuning */
html[data-bs-theme="dark"]{
  --bs-body-bg: #071426;
  --bs-body-color: #e6edf6;
  --bs-body-color-rgb: 230, 237, 246;

  --bs-secondary-color: rgba(230, 237, 246, 0.70);
  --bs-tertiary-color: rgba(230, 237, 246, 0.55);

  --bs-border-color: rgba(255,255,255,0.10);
  --bs-card-bg: rgba(255,255,255,0.03);
}

/* Topbar link colors in both themes */
.topbar a{ color: var(--bs-body-color); }
.topbar a:hover{ color: var(--brand-red); }

/* Common section spacing */
.section{
  padding: 72px 0;
}

/* HERO */
.hero{
  min-height: 72vh;
  position: relative;
  overflow: hidden;
}
.hero--image .hero__bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
.hero--image .hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 20% 20%, rgba(225,29,46,0.18), transparent 60%),
    linear-gradient(90deg, rgba(11,31,58,0.78), rgba(11,31,58,0.35));
}
html[data-bs-theme="dark"] .hero--image .hero__overlay{
  background:
    radial-gradient(1200px 500px at 20% 20%, rgba(225,29,46,0.20), transparent 60%),
    linear-gradient(90deg, rgba(7,20,38,0.86), rgba(7,20,38,0.45));
}
.hero h1, .hero p{ color: #fff; }
.text-accent{ color: rgba(255,255,255,0.85) !important; }
.text-hero-muted{ color: rgba(255,255,255,0.78) !important; }

/* Glass card on hero */
.glass-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
}
html[data-bs-theme="dark"] .glass-card{
  background: rgba(8,23,43,0.55);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Icon circle */
.icon-circle{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(225,29,46,0.10);
  color: var(--brand-red);
}
html[data-bs-theme="dark"] .icon-circle{
  background: rgba(225,29,46,0.18);
}

/* Bernafon showcase */
.section-bernafon{
  background: var(--brand-navy);
}
.bernafon-slide{
  min-height: 560px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.bernafon-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 20% 15%, rgba(225,29,46,0.18), transparent 65%),
    linear-gradient(90deg, rgba(11,31,58,0.86), rgba(11,31,58,0.38));
}
.bernafon-overlay--strong{
  background:
    radial-gradient(900px 480px at 20% 15%, rgba(225,29,46,0.20), transparent 65%),
    linear-gradient(90deg, rgba(11,31,58,0.92), rgba(11,31,58,0.56));
}

/* Make indicators visible on darker backgrounds */
.section-bernafon .carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.section-bernafon .carousel-control-prev-icon,
.section-bernafon .carousel-control-next-icon{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.device-frame{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-xl);
  padding: 18px;
  backdrop-filter: blur(6px);
}
.device-frame img{
  max-height: 420px;
  width: 100%;
  object-fit: contain;
}

/* Gallery images */
.gallery-img{
  height: 180px;
  object-fit: cover;
}

/* WhatsApp floating button */
.fab-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  z-index: 1080;
}
.fab-whatsapp:hover{ color:#fff; filter: brightness(0.95); }

/* Slightly rounder cards across the site */
.card, .btn, .form-control, .accordion-item{
  border-radius: var(--radius-xl);
}


/* Ensure navbar toggler icon is visible in both themes */
.navbar{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-bs-theme='dark'] .navbar{
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.88%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Kullanıcı Yorumları Sekmesi */
#kullanici-yorumlari .ky-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

#kullanici-yorumlari .ky-badge{
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  padding:10px 14px;
  border-radius:999px;
  background:#0b57d0;
  color:#fff;
  white-space:nowrap;
}

#kullanici-yorumlari .yorum-galeri{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

#kullanici-yorumlari .yorum-galeri img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  background:#fff;
}

@media (max-width: 992px){
  #kullanici-yorumlari .yorum-galeri{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #kullanici-yorumlari .yorum-galeri img{ height:200px; }
}
@media (max-width: 600px){
  #kullanici-yorumlari .yorum-galeri img{ height:180px; }
}

/* Kullanıcı Yorumları (Minimal Slider) */
.ky-section{
  padding: 56px 16px;
  /* site arka planıyla uyum: koyu degrade */
  background: linear-gradient(180deg, #08172b 0%, #0b1f3a 100%);
}
.ky-section .ky-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.ky-section .ky-badge{
  font-weight:700;
  font-size:14px;
  letter-spacing:.3px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(11,87,208,.95);
  color:#fff;
  white-space:nowrap;
}

/* Kart: beyaz alan iptal, sayfa arka planını kullan */
.ky-section .ky-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 10px;
  margin: 0;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

/* Görsel: kesmeden sığdır, etrafı beyaz değil */
.ky-section .ky-card img{
  width: 100%;
  height: 520px;
  object-fit: contain;
  display:block;
  border-radius: 12px;
  background: transparent;
}

/* Swiper kontrolleri: minimalist */
.ky-section .swiper-pagination-bullet{
  background: rgba(255,255,255,.35);
  opacity: 1;
}
.ky-section .swiper-pagination-bullet-active{
  background: rgba(255,255,255,.85);
}

.ky-section .swiper-button-prev,
.ky-section .swiper-button-next{
  color: rgba(255,255,255,.85);
  width: 44px;
  height: 44px;
}
.ky-section .swiper-button-prev:after,
.ky-section .swiper-button-next:after{
  font-size: 22px;
}

@media (max-width: 992px){
  .ky-section .ky-card img{ height: 420px; }
}
@media (max-width: 600px){
  .ky-section .ky-header{ flex-direction:column; align-items:flex-start; }
  .ky-section .ky-card{ padding: 8px; }
  .ky-section .ky-card img{ height: 340px; }
}

/* Yorumlar + Ofis yan yana düzen */
.ky-section .ky-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.ky-section .ky-subtitle{
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,.86);
  margin: 0 0 10px 6px;
  letter-spacing: .2px;
}
.ky-section .swiper{ width: 100%; }

@media (max-width: 992px){
  .ky-section .ky-grid{ grid-template-columns: 1fr; }
  .ky-section .ky-subtitle{ margin-top: 10px; }
}

/* Fix: yan yana slider görünürlüğü + daha kompakt yükseklik */
.ky-section .ky-col{ min-width: 0; }
.ky-section .ky-card img{ height: 420px; }
@media (max-width: 992px){ .ky-section .ky-card img{ height: 360px; } }
@media (max-width: 600px){ .ky-section .ky-card img{ height: 300px; } }


/* Yorum Slider: Blur -> Clear (aktif slide) */
.ky-swiper .swiper-slide{
  opacity: .25;
  filter: blur(6px);
  transition: opacity 450ms ease, filter 450ms ease;
}
.ky-swiper .swiper-slide-active{
  opacity: 1;
  filter: blur(0);
}

/* Swiper fade effect uses absolute slides; keep transitions clean */
.ky-swiper.swiper-fade .swiper-slide{
  pointer-events: none;
}
.ky-swiper.swiper-fade .swiper-slide-active{
  pointer-events: auto;
}

/* Ofis Lightbox */
.ofis-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.74);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}
.ofis-lightbox.is-open{
  display: flex;
}
.ofis-lightbox__img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.ofis-lightbox__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}
.ofis-lightbox__close:hover{
  background: rgba(255,255,255,.16);
}
.ofis-lightbox-open{
  overflow: hidden;
}

/* Ofis slider görselleri tıklanabilir */
.ofis-swiper img{ cursor: zoom-in; }

/* Başlıkları slider üstüne ortala + badge yukarı */
.ky-gridwrap{
  position: relative;
  padding-top: 18px; /* badge için üst boşluk */
}
.ky-badge-center{
  position: absolute;
  top: -14px;            /* daha yukarı */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ky-col-title{
  text-align: center;
  margin: 0 0 12px 0;
}
@media (max-width: 992px){
  .ky-badge-center{
    position: static;
    transform: none;
    margin: 0 auto 14px auto;
    display: inline-block;
  }
  .ky-gridwrap{ padding-top: 0; text-align: center; }
}

/* Başlık çerçevesi (tema uyumlu pill) */
.ky-title-pill{
  display:inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

/* Badge yıldızlar */
.ky-badge-center{
  display:flex;
  align-items:center;
  gap:10px;
}
.ky-stars{
  color: #f6c343; /* sarı yıldız */
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1;
}
.ky-badge-text{
  font-weight: 700;
}


/* Özellikler Badge */
.feature-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;

  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.55);
  color: #ff5a5a;

  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;

  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(220,38,38,.25);

  margin-left: 10px;
  white-space: nowrap;

  
}
.feature-badge.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* Özellikler Modal */
.oz-blur #page, .oz-blur body{
  /* safe: applied via body class, but keep minimal */
}
body.oz-blur-active > *:not(#ozelliklerModal):not(.ofis-lightbox){
  filter: blur(6px);
}
body.oz-blur-active{
  overflow: hidden;
}

.oz-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9998;
}
.oz-modal.is-open{ display: block; }

.oz-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.oz-modal__panel{
  position: relative;
  width: min(880px, 92vw);
  max-height: 86vh;
  margin: 6vh auto 0 auto;
  border-radius: 18px;
  background: rgba(11, 22, 44, .88);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.oz-modal__close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
  z-index: 2;
}
.oz-modal__close:hover{ background: rgba(255,255,255,.16); }

.oz-modal__head{
  padding: 22px 22px 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.oz-modal__title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.96);
}
.oz-modal__sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.oz-modal__body{
  padding: 16px 22px;
  overflow: auto;
  max-height: calc(86vh - 140px);
}
.oz-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  font-size: 14px;
}
.oz-list li{ margin: 10px 0; }
.oz-list strong{ color: rgba(255,255,255,.96); }

.oz-page{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(12%);
  transition: transform 380ms ease, opacity 380ms ease;
  pointer-events: none;
  will-change: transform, opacity;
}
.oz-page.is-active{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.oz-page.is-entering.is-forward{ transform: translateX(12%); opacity: 0; }
.oz-page.is-entering.is-backward{ transform: translateX(-12%); opacity: 0; }
.oz-page.is-entering.is-anim{ transform: translateX(0); opacity: 1; }

.oz-page.is-leaving.is-forward{ transform: translateX(0); opacity: 1; }
.oz-page.is-leaving.is-backward{ transform: translateX(0); opacity: 1; }
.oz-page.is-leaving.is-forward.is-anim{ transform: translateX(-12%); opacity: 0; }
.oz-page.is-leaving.is-backward.is-anim{ transform: translateX(12%); opacity: 0; }

.oz-modal__foot{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.oz-nav{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.oz-nav:hover{ background: rgba(255,255,255,.12); }

.oz-dots{
  display:flex;
  align-items:center;
  gap: 10px;
}
.oz-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.35);
  cursor:pointer;
}
.oz-dot.is-active{
  background: rgba(255,255,255,.90);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

@media (max-width: 520px){
  .oz-modal__panel{ margin-top: 4vh; }
  .oz-modal__foot{
    flex-direction: column;
  }
  .oz-nav{ width: 100%; }
}


/* Özellikler Badge Hover */
.feature-badge{
  cursor: pointer; /* link gibi */
  user-select: none;
}
.feature-badge:hover{
  background: rgba(220, 38, 38, 0.30);
  border-color: rgba(220, 38, 38, 0.80);
  color: #ffd1d1;
  box-shadow: 0 10px 28px rgba(220,38,38,.38);
  transform: translateY(-1px);
}
.feature-badge:active{
  transform: translateY(0px);
}


/* Özellikler Modal Sayfa Geçişi (slider efekt) */
.oz-pages{
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
.oz-page{
  display: block;             /* display ile değil transform ile kontrol */
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(12%);
  transition: transform 380ms ease, opacity 380ms ease;
  pointer-events: none;
}
.oz-page.is-active{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* yön sınıfları: giriş animasyonu */
.oz-pages.is-forward .oz-page{ transform: translateX(12%); }
.oz-pages.is-backward .oz-page{ transform: translateX(-12%); }
.oz-pages.is-forward .oz-page.is-active{ transform: translateX(0); }
.oz-pages.is-backward .oz-page.is-active{ transform: translateX(0); }


/* Özellikler modal - okunabilirlik ve gezinme */
.oz-modal__body{
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 10px;
}
.oz-modal__body::-webkit-scrollbar{ width: 10px; }
.oz-modal__body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 10px;
}
.oz-modal__body::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}

.oz-modal__foot{
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  background: linear-gradient(180deg, rgba(8,16,32,0) 0%, rgba(8,16,32,.9) 35%, rgba(8,16,32,.95) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Modal açıkken arkadaki slider oklarını gizle (kafa karışmasın) */
body.oz-modal-open .carousel-control-prev,
body.oz-modal-open .carousel-control-next,
body.oz-modal-open .swiper-button-prev,
body.oz-modal-open .swiper-button-next{
  opacity: 0 !important;
  pointer-events: none !important;
}


/* v28: make Features modal pages scrollable (pages are absolutely positioned) */
.oz-modal__body{
  height: min(520px, 62vh);
  overflow: hidden; /* scroll lives inside each page */
}
.oz-pages{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.oz-page{
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 18px 22px 18px 22px;
}
/* a little breathing room for the list */
.oz-page ul{ margin: 0; padding-left: 18px; }


/* === Ürün Ailesi (Bernafon Carousel) Ok Konumları === */
#bernafonCarousel .carousel-control-prev,
#bernafonCarousel .carousel-control-next{
  width: 64px;              /* dar alan: görsele daha az taşar */
  opacity: 1;
}

#bernafonCarousel .carousel-control-prev{
  left: 12px;
  right: auto;
  justify-content: flex-start;
}

#bernafonCarousel .carousel-control-next{
  right: 12px;
  left: auto;
  justify-content: flex-end;
}

/* ikonları hafif “pill” içine al: görsel üstünde daha okunur, kenarda durur */
#bernafonCarousel .carousel-control-prev-icon,
#bernafonCarousel .carousel-control-next-icon{
  background-color: rgba(8, 18, 34, 0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 44px;
  height: 44px;
  background-size: 16px 16px;
}

/* mobilde kenar boşluğu daha az */
@media (max-width: 768px){
  #bernafonCarousel .carousel-control-prev{ left: 6px; }
  #bernafonCarousel .carousel-control-next{ right: 6px; }
  #bernafonCarousel .carousel-control-prev,
  #bernafonCarousel .carousel-control-next{ width: 52px; }
  #bernafonCarousel .carousel-control-prev-icon,
  #bernafonCarousel .carousel-control-next-icon{ width: 40px; height: 40px; }
}


/* Kime uygun mini etiketi */
.kime-uygun{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#eaf1ff;
  font-size:.85rem;
  line-height:1;
  /* Butonlarla çakışmayı önle */
  margin-top:.6rem;
  margin-bottom:.8rem;
  backdrop-filter: blur(6px);
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(255,255,255,.10),
    0 0 28px rgba(222, 56, 83, .18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.kime-uygun:hover{
  transform: translateY(-1px);
  border-color: rgba(222, 56, 83, .45);
  background: rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 22px rgba(255,255,255,.12),
    0 0 40px rgba(222, 56, 83, .28);
}
.kime-uygun .kime-label{
  font-weight:600;
  opacity:.95;
}

/* Tooltip: sadece hover'da detay göster */
.kime-uygun::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  /* Tooltip yukarı doğru açılsın; alt butonlarla çakışmayı önler */
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: .55rem;
  width: max-content;
  max-width: min(520px, calc(100vw - 2rem));
  padding: .6rem .75rem;
  border-radius: 12px;
  background: rgba(10, 18, 36, .92);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  line-height: 1.35;
  font-size: .85rem;
  opacity: 0;
  /* Alttan hafif yukarı kayarak gelsin */
  transform: translateY(6px);
  pointer-events: none;
  z-index: 50;
  white-space: normal;
}
.kime-uygun:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* positioning context */
.kime-uygun{ position: relative; }

/* =========================
   Blog
   ========================= */

/*
  Fix: When one card expands (details open), Bootstrap .row stretches all
  columns to the tallest item in the row. This makes other cards look like
  they "expanded" even though their content is closed.
  We want each card to keep its own intrinsic height.
*/
#blog .row.g-4 {
  align-items: flex-start;
}

#blog .row.g-4 > [class*="col-"] {
  align-self: flex-start;
}

/* Ensure the card itself does not try to fill the column height */
#blog .blog-card {
  height: auto !important;
}

/* Title badge (premium / neon) */
.blog-title {
  margin: 0;
}

.blog-title__badge {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #ffb46a;
  background: linear-gradient(90deg, rgba(255,122,0,0.22), rgba(255,0,102,0.14));
  border: 1px solid rgba(255, 122, 0, 0.40);
  box-shadow:
      0 0 0 1px rgba(255,122,0,0.12) inset,
      0 10px 28px rgba(0,0,0,.35),
      0 0 22px rgba(255,122,0,0.22);
  text-shadow: 0 0 14px rgba(255,122,0,0.35);
}

#blog .text-muted { color: rgba(255,255,255,.72) !important; }

.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .70;
  background:
    radial-gradient(800px 260px at 20% 10%, rgba(0, 122, 255, 0.18), transparent 65%),
    radial-gradient(500px 220px at 85% 15%, rgba(255, 0, 102, 0.12), transparent 65%);
}

.blog-card > * { position: relative; }

.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}

.blog-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1;
  color: rgba(255,255,255,.90);
  background: rgba(0, 122, 255, 0.20);
  border: 1px solid rgba(0, 122, 255, 0.35);
}

.blog-details {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: .9rem;
  padding-bottom: .55rem; /* "Devamını oku" kart kenarıyla çakışmasın */
}

.blog-details summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.88);
  font-weight: 600;
  padding: .34rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  margin-bottom: .20rem;
}

.blog-details summary:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}

.blog-details summary::-webkit-details-marker { display: none; }

.blog-details summary::after {
  content: '›';
  display: inline-block;
  transform: rotate(90deg);
  opacity: .9;
  transition: transform .18s ease;
}

.blog-details[open] summary::after {
  transform: rotate(-90deg);
}

.blog-details .blog-content {
  margin-top: .75rem;
  color: rgba(255,255,255,.78);
}

.blog-details .blog-content ul {
  padding-left: 1.1rem;
  margin: .6rem 0 0;
}

.blog-details .blog-content li { margin: .35rem 0; }

/* Blog kart başlıkları: kenar/border ile çakışmayı engelle (premium spacing) */
.blog-card {
  padding: 22px 22px 18px;
}

.blog-card__header {
  padding-top: 4px; /* üst çerçeveyle başlık çakışmasını önle */
}

.blog-card__title {
  margin: 0 0 10px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.blog-card__desc {
  margin: 0;
}

/* =========================
   FAQ (SSS) slider
   ========================= */

.faq-carousel {
  margin-top: 18px;
}

/* Daha "premium" geçiş: hafif kayma + fade */
.faq-carousel.carousel-fade .carousel-item {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.faq-carousel.carousel-fade .carousel-item.active,
.faq-carousel.carousel-fade .carousel-item.carousel-item-start,
.faq-carousel.carousel-fade .carousel-item.carousel-item-end {
  opacity: 1;
  transform: translateX(0);
}

/* Oklar: okunabilir ama sade */
.faq-carousel .carousel-control-prev,
.faq-carousel .carousel-control-next {
  width: 56px;
}

.faq-carousel .carousel-control-prev-icon,
.faq-carousel .carousel-control-next-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-size: 16px 16px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.faq-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.faq-carousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.18);
}



/* FAQ slider - controls & indicators refinements */
.faq-carousel{position:relative;}
.faq-carousel .carousel-control-prev,
.faq-carousel .carousel-control-next{
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  opacity:1;
}
.faq-carousel .carousel-control-prev{left:-72px;}
.faq-carousel .carousel-control-next{right:-72px;}

@media (max-width: 992px){
  .faq-carousel .carousel-control-prev{left:-36px;}
  .faq-carousel .carousel-control-next{right:-36px;}
}
@media (max-width: 576px){
  .faq-carousel .carousel-control-prev{left:10px;}
  .faq-carousel .carousel-control-next{right:10px;}
}

.faq-indicators{
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.faq-indicators [data-bs-target]{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.35);
  opacity:1;
  margin:0;
}
.faq-indicators .active{
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 18px rgba(0,136,255,.35);
}

/* Online İşitme Testi CTA (Hero) */
.hero-online-test-block{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
  width: fit-content; /* note: keeps note centered under the button */
}

.hero-online-test-block .online-test-note-badge{
  width: 100%;
  justify-content: center;
  text-align: center;
}

.online-test-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.btn-online-test{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  color:#e9f2ff;
  text-decoration:none;
  background:rgba(10, 45, 95, 0.55);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Keep all button contents above the glow layer */
.btn-online-test > *{
  position: relative;
  z-index: 1;
}

/* Center the main label within the pill (badge + label + icon layout) */
.btn-online-test .online-test-label{
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: .2px;
}

.btn-online-test .online-test-spacer,
.btn-online-test .online-test-badge,
.btn-online-test .bi-box-arrow-up-right{
  flex: 0 0 auto;
}

/* İkon ile simetrik görünüm için sol tarafta boşluk */
.btn-online-test .online-test-spacer{
  width: 18px;
  height: 18px;
}

.btn-online-test .online-test-spacer{
  width: 18px;
  opacity: 0;
}

.btn-online-test:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 16px 34px rgba(0,0,0,0.42);
}

.btn-online-test::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  background: radial-gradient(closest-side, rgba(60,160,255,0.45), rgba(60,160,255,0.0) 60%);
  filter: blur(6px);
  opacity: .85;
  z-index:-1;
  animation: onlineTestPulse 1.4s ease-in-out infinite;
}

@keyframes onlineTestPulse{
  0%{ transform: scale(0.98); opacity: .55; }
  50%{ transform: scale(1.03); opacity: .95; }
  100%{ transform: scale(0.98); opacity: .55; }
}

.online-test-badge{
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  color:#071a2d;
  background: linear-gradient(135deg, rgba(90,200,255,1), rgba(20,120,255,1));
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: 0 10px 18px rgba(20,120,255,0.28);
}

.online-test-note{
  max-width:520px;
  font-size:13px;
  color: rgba(233,242,255,0.82);
}

/* Inline hero button variant (aligned with other CTAs) */
.btn-online-test-inline{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
}

.btn-online-test-inline::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: radial-gradient(closest-side, rgba(60,160,255,0.45), rgba(60,160,255,0.0) 62%);
  filter: blur(7px);
  opacity: .75;
  z-index: -1;
  animation: onlineTestPulse 1.4s ease-in-out infinite;
}

/* Note badge for readability */
.online-test-note-badge{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(10, 20, 40, 0.45);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(240, 247, 255, 0.90);
  max-width: 620px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(0,0,0,0.32);
}

.online-test-note-badge i{
  opacity: .9;
  margin-top: 1px;
}

@media (max-width: 576px){
  .online-test-note{max-width:100%;}
}