::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #1967FF;
}

/* ===== Modal Animasyon Efektleri - home.blade.php tarzı ===== */
.modal-card {
    position: relative;
    transition: all 0.8s ease;
    transform: translateY(50px);
    opacity: 0;
}

.modal-card.aos-animate {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Modal açıldığında animasyonları zorla başlat */
.modal.show .modal-card {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* İlk açılışta parlama efekti */
.modal-shine {
    position: relative;
    overflow: hidden;
}

.modal-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 1s ease-in-out;
    z-index: 1;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Modal form elemanları animasyonları - sadece modal içindeki formlar */
.modal-card .form-group, .modal-card .input-group {
    position: relative;
    transition: all 0.8s ease;
    transform: translateX(-30px);
    opacity: 0;
}

.modal-card .form-group.aos-animate, .modal-card .input-group.aos-animate {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Modal açıldığında form elemanlarını zorla göster */
.modal.show .modal-card .form-group, .modal.show .modal-card .input-group {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

.modal-card .form-group.form-focused, .modal-card .input-group.form-focused {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(25, 103, 255, 0.2);
}

.modal-card .form-control {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.modal-card .form-control:focus {
    border-color: #1967FF;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 0.2rem rgba(25, 103, 255, 0.25);
    transform: scale(1.02);
}

/* Modal buton animasyonları - sadece modal içindeki butonlar */
.modal-card .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.6s ease;
    transform: translateY(30px);
    opacity: 0;
}

.modal-card .btn.aos-animate {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Modal açıldığında butonları zorla göster */
.modal.show .modal-card .btn {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.modal-card .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.modal-card .btn:hover::before {
    left: 100%;
}

.modal-card .btn-hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25, 103, 255, 0.4);
}

/* Modal backdrop animasyonu */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* Modal dialog animasyonu */
.modal-dialog {
    transition: all 0.8s ease;
    transform: translateY(-50px);
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

/* AOS animasyon gecikmeleri - home.blade.php tarzı */
[data-aos] {
    transition-duration: 0.8s;
}

[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-30px);
}

[data-aos="fade-right"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translateX(30px);
}

[data-aos="fade-left"].aos-animate {
    opacity: 1;
    transform: translateX(0);
}

/* Modal show password icon animasyonu */
.modal-card .show-pass {
    transition: all 0.3s ease;
    cursor: pointer;
}

.modal-card .show-pass:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.1);
}

/* Modal reCAPTCHA animasyonu */
.modal-card .g-recaptcha {
    transition: all 0.6s ease;
    transform: translateY(30px);
    opacity: 0;
}

.modal-card .g-recaptcha.aos-animate {
    transform: translateY(0);
    opacity: 1;
}

.modal-card .g-recaptcha:hover {
    transform: scale(1.02);
}

/* ===== Ana Giriş Formu Animasyonları ===== */
.main-login-card {
    position: relative;
    transition: all 0.8s ease;
    transform: translateY(50px);
    opacity: 0;
}


/* Ana giriş formu - JavaScript ile kontrol edilecek */
.main-login-card {
    position: relative;
    overflow: hidden;
    transform: translateY(50px);
    opacity: 0;
    transition: all 1.2s ease;
}

.main-login-card.animate {
    transform: translateY(0);
    opacity: 1;
}

/* Ana giriş formu parlama efekti */
.main-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    z-index: 1;
    transition: left 1.2s ease;
}

.main-login-card.shine::before {
    left: 100%;
}


/* Ana giriş formu elemanları başlangıç durumu */
.main-login-card .form-group, .main-login-card .input-group {
    position: relative;
    transform: translateX(-30px);
    opacity: 0;
}

.main-login-card span[data-aos="fade-up"] {
    transform: translateY(30px);
    opacity: 0;
}

.main-login-card .g-recaptcha {
    transform: translateY(30px);
    opacity: 0;
}

.main-login-card .btn {
    transform: translateY(30px);
    opacity: 0;
}

.main-login-card .form-group.form-focused, .main-login-card .input-group.form-focused {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(25, 103, 255, 0.2);
}

.main-login-card .form-control {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.main-login-card .form-control:focus {
    border-color: #1967FF;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 0.2rem rgba(25, 103, 255, 0.25);
    transform: scale(1.02);
}

/* Ana giriş formu buton animasyonları */
.main-login-card .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.6s ease;
    transform: translateY(30px);
    opacity: 0;
}



.main-login-card .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.main-login-card .btn:hover::before {
    left: 100%;
}

.main-login-card .btn-hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25, 103, 255, 0.4);
}

/* Ana giriş formu show password icon animasyonu */
.main-login-card .show-pass {
    transition: all 0.3s ease;
    cursor: pointer;
}

.main-login-card .show-pass:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.1);
}


.main-login-card .g-recaptcha:hover {
    transform: scale(1.02);
}

/* Neden biz bölümü - blur kaldırıldı */
.whyus {
    position: relative;
}

/* Silip geri yazma animasyonu */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    position: relative;
}

.typewriter::after {
    content: '|';
    color: #007bff;
    animation: blink 1s infinite;
    font-weight: bold;
    display: var(--cursor-display, block);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Neden biz başlığı için özel stil */
.whyus-title {
    position: relative;
    display: inline-block;
}

.whyus-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #28a745);
    animation: underline-expand 2s ease-in-out 3.5s forwards;
}

@keyframes underline-expand {
    from { width: 0; }
    to { width: 100%; }
}

/* Blog bölümü - blur kaldırıldı */
.blog-section {
    position: relative;
    width: 100%;
}

.blog-section .container {
    width: 100%;
}

/* Blog typewriter animasyonu */
.typewriter-blog {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    position: relative;
}

.typewriter-blog::after {
    content: '|';
    color: #28a745;
    animation: blink-blog 1s infinite;
    font-weight: bold;
    display: var(--cursor-display-blog, block);
}

@keyframes blink-blog {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Blog başlığı için özel alt çizgi */
.typewriter-blog::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #28a745, #007bff);
    animation: underline-expand-blog 2.5s ease-in-out 4s forwards;
    border-radius: 2px;
}

/* Blog başlığı renk ayarı - tüm metin beyaz olsun */
.typewriter-blog,
.typewriter-blog *,
.typewriter-blog .text-primary,
.typewriter-blog span.text-primary,
.typewriter-blog span {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.typewriter {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.typewriter * {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.typewriter .text-primary {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.typewriter span {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

@keyframes underline-expand-blog {
    from { width: 0; }
    to { width: 100%; }
}

/* Panel sayfası arkaplan - ana sayfa ile aynı */
.panel {
    /* Ana sayfa ile aynı arkaplan */
    background-image:
      linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
      linear-gradient(135deg, #000000 0%, #00000050 70%, #bdbaba 100%),
      url('../../../orjinal.png') !important;
    background-size: auto, cover, contain;
    background-position: center center, center center, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
    min-height: 100vh;
    position: relative;
}

/* Panel sayfası için dekoratif elementler */
.panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/group1/13.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
    opacity: 0.3;
}

.panel::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/group1/12.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    z-index: -1;
    opacity: 0.2;
}

/* Panel kartları için blur efekti */
.panel .card-bg-primary,
.panel .card-bg-turquoise,
.panel .card-bg-orange {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}

.panel .card {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.panel .card-bgg-green {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(40, 167, 69, 0.2) !important;
    border: 1px solid rgba(40, 167, 69, 0.3);
    box-shadow: 0 6px 25px rgba(40, 167, 69, 0.2);
    border-radius: 12px;
}

/* Panel typewriter animasyonları */
.typewriter-panel {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.typewriter-panel::after {
    content: '|';
    color: #007bff;
    animation: blink-panel 1s infinite;
    font-weight: bold;
    display: var(--cursor-display-panel, block);
}

.typewriter-panel-2 {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.typewriter-panel-2::after {
    content: '|';
    color: #28a745;
    animation: blink-panel-2 1s infinite;
    font-weight: bold;
    display: var(--cursor-display-panel-2, block);
}

@keyframes blink-panel {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes blink-panel-2 {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Neden biz kartları - GİRİŞ GİBİ ANİMASYON */
.whyus-card {
    position: relative;
    overflow: hidden;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.8s ease;
}

.whyus-card.aos-animate {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Neden biz kartları parlama efekti */
.whyus-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    z-index: 1;
    transition: left 1s ease;
}

.whyus-card.shine::before {
    left: 100% !important;
}

/* Neden biz kartları elemanları - GİRİŞ GİBİ */
.whyus-card .d-block,
.whyus-card span,
.whyus-card p {
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s ease;
}

.whyus-card .d-block.aos-animate,
.whyus-card span.aos-animate,
.whyus-card p.aos-animate {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Neden biz kartları hover efekti - kırmızı çizgiler */
.whyus-card:hover {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3) !important;
    transform: translateY(-5px) !important;
}

/* Kral tacı altın/sarı yap */
.whyus-card .king {
    filter: hue-rotate(45deg) saturate(1.5) brightness(1.3) !important;
    filter: drop-shadow(0 0 15px #ffd700) !important;
    transition: all 0.3s ease !important;
}

/* Kral tacı hover efekti - kırmızı */
.whyus-card:hover .king {
    filter: hue-rotate(0deg) saturate(2) brightness(1.2) !important;
    filter: drop-shadow(0 0 15px #ef4444) !important;
}
/* Montserrat font import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Hakkımızda sayfası için özel stiller */
.hakkimizda-content {
    font-family: 'Montserrat', sans-serif !important;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

.hakkimizda-content h1 {
    font-family: 'Montserrat', sans-serif !important;
}

.hakkimizda-content p {
    font-family: 'Montserrat', sans-serif !important;
}

.hakkimizda-content strong {
    font-family: 'Montserrat', sans-serif !important;
}

.hakkimizda-content blockquote {
    font-family: 'Montserrat', sans-serif !important;
}

html {
    /* Dark overlay + gradient + background image */
    background-image:
      linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
      linear-gradient(135deg, #000000 0%, #00000050 70%, #bdbaba 100%),
      url('../../../orjinal.png') !important;
    background-size: auto, cover, contain;
    background-position: center center, center center, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: scroll, scroll, scroll;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: transparent;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent; /* no extra overlay in dark mode */
    z-index: -1;
}

/* ===== Dark Theme Defaults ===== */
body {
    color: #e5e7eb; /* text */
}

/* Links */
a { color: #60a5fa; }
a:hover, a:focus { color: #93c5fd; }

/* Common containers */
.card,
.panel,
.box,
.modal-content,
.dropdown-menu,
.navbar,
.footer,
.header,
.sidebar,
.list-group-item,
.table,
.table tr,
.table td,
.table th {
    background-color: #131a2a !important;
    color: #e5e7eb !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    background-color: #0f1524 !important;
    color: #e5e7eb !important;
    border: 1px solid #22324f !important;
}

/* Dropdown items */
.dropdown-menu a,
.dropdown-item {
    color: #e5e7eb !important;
}
.dropdown-menu a:hover,
.dropdown-item:hover {
    background-color: #1a2338 !important;
}

/* Buttons (keep brand primary but adapt hover) */
.btn,
button {
    border-color: #22324f;
}
.btn-primary:hover,
button.btn-primary:hover { filter: brightness(1.1); }

/* Tables borders subtle */
.table,
.table-bordered {
    border-color: #22324f !important;
}

* {
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.dropdown-toggle>div {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  width: 90%;
}

.light-dark-switch {
  display: none;
}

.light-dark-switch-btn i {
  color: #125cec;
  font-size: 17px;
}

.dark-active.light-dark-switch-btn i {
  color: #fff;
}

.dark-active.light-dark-switch-btn {
  background: #125cec;
}

.dark-active.light-dark-switch-btn::before {
  content: '';
  position: absolute;
  left: -100%;
  width: calc(100% + 3px);
  background: #151e34;
  height: 100%;
  z-index: 0;
  display: none;
}

.dark-active.light-dark-switch-btn {
  margin-left: 50%;
}

.light-dark-switch-btn {
  cursor: pointer;
  position: absolute;
  width: 50%;
  height: 100%;
  background: #ffffff;
  border-radius: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

nav.navbar {
  border-bottom: 3px solid #1967FF;
  background: transparent;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
  color: #25396f;
}

.navbar-light .navbar-nav .nav-link {
  color: #606F99;
}

.nav-item .dropdown-menu {
  color: #25396f;
  background-color: #e7edf9;
  border: 1px solid #1967ff;
  border-radius: 7px;
}

.nav-item .dropdown-item {
  padding: 0.5rem 1rem;
  color: #25396f;
}

.nav-item .dropdown-item.active,
.nav-item .dropdown-item:active {
  color: #fff !important;
  text-decoration: none;
  background-color: #1967ff;
}

.nav-item .dropdown-item:focus,
.nav-item .dropdown-item:hover {
  color: #25396f;
  background-color: #e7edf9;
}

.btn-success,
.bg-success {
  background: #20CF86 !important;
  color: #fff !important;
}

.btn-light,
.bg-light {
  background: #F2F7FC !important;
  color: #fff !important;
}

.bg-success-light,
.bg-success-light:hover {
  background: rgba(32, 207, 134, 0.25);
  border-radius: 6px;
  color: #20CF86;
}

.text-success {
  color: #20cf86 !important;
}

.text-secondary {
  color: #667093 !important;
}

.text-primary {
  color: #1967FF !important;
}

.bg-primary {
  background: #1967FF !important;
  color: #fff;
}

.bg-light-3 {
  background: #E7EDF9 !important;
}

.text-dark {
  color: #25396F !important;
}

.bg-dark-2 {
  background: transparent !important;
  color: #fff;
}

.bg-primary *:not(i.fal) {
  color: #fff !important;
}

.bg-primary .bg-success-light {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
}

.card {
  border-radius: 16px;
}

.card-img-top {
  border-radius: 12px 12px 0 0;
}

.card-body {
  border-radius: 0 0 12px 12px;
}

.dropdown-toggle::after {
  content: unset;
}

.brands li {
  display: inline-block;
  margin-right: .25em;
  margin-bottom: 1em;
}

p {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}

.login-form {
  z-index: 10;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  -webkit-box-shadow: 0px 24px 32px -18px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 24px 32px -18px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.82) !important; /* solid black feel */
  border: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.text-secondary-1,
.text-secondary-1 * {
  color: #98A8BF;
}

.dropdown-menu {
  max-height: 250px;
  overflow-y: auto;
}

.mh-200 {
  max-height: 200px;
  overflow-y: auto;
}

.form-control::-webkit-input-placeholder {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #98A8BF;
  opacity: 0.7;
}

.form-control::-moz-placeholder {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #98A8BF;
  opacity: 0.7;
}

.form-control:-ms-input-placeholder {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #98A8BF;
  opacity: 0.7;
}

.form-control::-ms-input-placeholder {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #98A8BF;
  opacity: 0.7;
}

.form-control::placeholder {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #98A8BF;
  opacity: 0.7;
}

.border-special-1 *,
.border-special-1 *:hover,
.border-special-1 *:focus {
  border-color: #98A8BF;
}

.border-special-1 input::-webkit-input-placeholder {
  font-size: 16px;
}

.border-special-1 input::-moz-placeholder {
  font-size: 16px;
}

.border-special-1 input:-ms-input-placeholder {
  font-size: 16px;
}

.border-special-1 input::-ms-input-placeholder {
  font-size: 16px;
}

.border-special-1 input::placeholder {
  font-size: 16px;
}

.bg-light-2 {
  background: #EEF3FC !important;
}

.login-form.bg-light {
  background: rgba(0, 0, 0, 0.86) !important;
  border: 0 !important;
}

/* Login form inner elements */
.login-form .form-control {
  background: #000000 !important; /* true black input */
  color: #ffffff !important;      /* white text */
  border: 0 !important;
  border-radius: 10px !important;
}
.login-form .form-control:focus {
  border-color: #60a5fa !important;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}
.login-form .input-group-text {
  background: transparent !important; /* sit on top of input */
  color: #ffffff !important;
  border: 0 !important; /* remove any grey */
  border-radius: 10px !important;
}
.login-form .btn.bg-success,
.login-form .bg-success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #ffffff !important;
}
.login-form .btn.bg-success:hover {
  filter: brightness(1.05);
}

/* Put eye icon inside the password input */
.login-form .input-group {
  position: relative;
}
.login-form .input-group .form-control[type="password"],
.login-form .input-group input[name="password"] {
  padding-right: 44px !important; /* room for the eye */
}
.login-form .input-group .show-pass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  z-index: 2;
}
.login-form .input-group .show-pass i {
  color: #000000 !important; /* black eye for visibility */
  opacity: 1;
}
.login-form .input-group-text {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

/* True black inputs and border cleanup */
.login-form .form-control {
  background: #000000 !important;
  border-color: #000000 !important; /* ensure no grey ring */
}

/* Ensure text inside the lightened card stays readable */
.login-form .text-dark {
  color: #ffffff !important;
}

/* Force general text inside login card to white for clarity on dark form */
.login-form,
.login-form *:not(.btn):not(.badge) {
  color: #ffffff !important;
}

/* Registration/Login modals: enforce dark theme */
#reg-modal .modal-content,
#log-modal .modal-content,
#sifre-modal .modal-content {
  background: transparent !important;
  color: #ffffff !important;
}
#reg-modal .login-form,
#log-modal .login-form,
#sifre-modal .login-form {
  background: #000000 !important; /* solid black */
  color: #ffffff !important;
}
#reg-modal .login-form.bg-light,
#log-modal .login-form.bg-light,
#sifre-modal .login-form.bg-light {
  background: #000000 !important;
}
#reg-modal .card,
#log-modal .card,
#sifre-modal .card { 
  background: #000000 !important; 
  color: #ffffff !important; 
}
#reg-modal .card *:not(.btn):not(.badge),
#log-modal .card *:not(.btn):not(.badge),
#sifre-modal .card *:not(.btn):not(.badge) { 
  color: #ffffff !important; 
}
#reg-modal .text-dark,
#log-modal .text-dark,
#sifre-modal .text-dark { 
  color: #ffffff !important; 
}
#reg-modal .text-secondary,
#reg-modal .text-secondary-1,
#reg-modal .text-primary,
#log-modal .text-secondary,
#log-modal .text-secondary-1,
#log-modal .text-primary,
#sifre-modal .text-secondary,
#sifre-modal .text-secondary-1,
#sifre-modal .text-primary {
  color: #ffffff !important;
}
#reg-modal .form-check-label,
#log-modal .form-check-label,
#sifre-modal .form-check-label { color: #ffffff !important; }
#reg-modal label,
#log-modal label,
#sifre-modal label { color: #ffffff !important; }
#reg-modal .login-form a,
#log-modal .login-form a,
#sifre-modal .login-form a {
  color: #93c5fd !important; /* readable links on dark */
}

/* Inputs inside modals: force true black background + white text */
#reg-modal .form-control,
#log-modal .form-control,
#sifre-modal .form-control {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  caret-color: #ffffff;
}
#reg-modal .form-control:focus,
#log-modal .form-control:focus,
#sifre-modal .form-control:focus {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #222222 !important;
  box-shadow: none !important;
}
/* Browser autofill fix for dark inputs */
#reg-modal input.form-control:-webkit-autofill,
#log-modal input.form-control:-webkit-autofill,
#sifre-modal input.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #000000 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
}

/* Darken modal backdrop for better contrast */
.modal-backdrop.show {
  opacity: 0.85 !important;
  background-color: #000000 !important;
}

/* Eye icon pill in modals: black bg + white icon for visibility */
#reg-modal .input-group-text,
#log-modal .input-group-text,
#sifre-modal .input-group-text {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
/* override utility class bg-white inside modals */
#reg-modal .bg-white,
#log-modal .bg-white,
#sifre-modal .bg-white { background-color: #000000 !important; }
#reg-modal .show-pass i,
#log-modal .show-pass i,
#sifre-modal .show-pass i {
  color: #ffffff !important; /* white eye */
  opacity: 1 !important;
}

/* Lighter placeholders for dark inputs */
.login-form .form-control::-webkit-input-placeholder { color: #9ca3af !important; }
.login-form .form-control::-moz-placeholder { color: #9ca3af !important; }
.login-form .form-control:-ms-input-placeholder { color: #9ca3af !important; }
.login-form .form-control::-ms-input-placeholder { color: #9ca3af !important; }
.login-form .form-control::placeholder { color: #9ca3af !important; }

/* Header/Navbar pure black theme */
nav.navbar {
  /* Dark overlay + gradient (match html) */
  background-image:
    linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
    linear-gradient(135deg, #000000 0%, #00000050 50%, #bdbaba 100%);
  background-size: auto, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
  /* Force Bootstrap variables to white inside navbar */
  --bs-link-color: #ef4444;
  --bs-link-hover-color: #ef4444;
  --bs-navbar-color: #ef4444;
  --bs-navbar-hover-color: #ef4444;
  --bs-navbar-active-color: #ef4444;
  --bs-border-color: #ef4444; /* ensure default border color isn't blue */
  border-bottom: 0 !important; /* avoid potential 1px seam */
  position: relative;
  margin-bottom: 0 !important;
  z-index: 1002;
  /* draw red line via inset shadow to avoid gaps */
  box-shadow: inset 0 -3px 0 0 #ef4444 !important;
}
/* Guaranteed red line under the entire header */
nav.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px; /* slightly thicker to hide AA gaps */
  background: #ef4444;
  pointer-events: none;
  z-index: 1002;
  display: block;
}
nav.navbar .navbar-brand,
nav.navbar .navbar-brand * {
  color: #ffffff !important;
}

/* Logo şeffaflaştırma */
nav.navbar .navbar-brand img {
  opacity: 0.7 !important;
  transition: opacity 0.3s ease !important;
}

nav.navbar .navbar-brand:hover img {
  opacity: 1 !important;
}
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .nav-link.active,
nav.navbar .navbar-nav .show>.nav-link {
  color: #ffffff !important;
  opacity: 0.95;
  text-decoration-color: #ffffff !important;
}
/* Eliminate any blue by forcing all states to white */
nav.navbar a,
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .dropdown-toggle { color: #ffffff !important; }
nav.navbar a:visited,
nav.navbar .navbar-nav .nav-link:visited { color: #ffffff !important; }
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus,
nav.navbar.navbar-dark .navbar-nav .nav-link:hover,
nav.navbar.navbar-dark .navbar-nav .nav-link:focus,
nav.navbar.navbar-light .navbar-nav .nav-link:hover,
nav.navbar.navbar-light .navbar-nav .nav-link:focus,
nav.navbar .navbar-nav .nav-link.active:hover,
nav.navbar .navbar-nav .nav-link.active:focus {
  color: #ffffff !important; /* base reset, overridden below */
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* FINAL override: navbar link hover/focus becomes RED */
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus,
nav.navbar .navbar-nav .nav-link.active:hover,
nav.navbar .navbar-nav .nav-link.active:focus {
  color: #ef4444 !important; /* red */
  text-decoration: none !important;
}
/* Nested elements (icons/spans) inside hovered links also red */
nav.navbar .navbar-nav .nav-link:hover *,
nav.navbar .navbar-nav .nav-link:focus *,
nav.navbar .navbar-nav .nav-link.active:hover *,
nav.navbar .navbar-nav .nav-link.active:focus * {
  color: #ef4444 !important;
  fill: #ef4444 !important;
  stroke: #ef4444 !important;
}
nav.navbar .navbar-nav .nav-link *,
nav.navbar .navbar-nav .nav-link.active * {
  color: #ffffff !important;
  fill: #ffffff !important; /* for inline SVGs */
  stroke: #ffffff !important;
}
/* Kill blue tones coming from utility classes inside navbar */
nav.navbar .text-primary,
nav.navbar a.text-primary,
nav.navbar .dropdown-toggle.text-primary,
nav.navbar .navbar-nav .nav-link.active:focus {
  color: #ffffff !important; /* white hover */
  text-decoration: none !important;
  text-decoration-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
/* Remove/neutralize bottom borders/underlines often used for active links */
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus,
nav.navbar .navbar-nav .nav-link.active {
  border-bottom: none !important;
  border-color: transparent !important;
}
/* Ensure navbar toggler and navbar itself don't show blue borders */
nav.navbar,
nav.navbar .navbar-toggler { border-color: #ffffff !important; }
nav.navbar .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
/* Dropdown borders/dividers */
nav.navbar .dropdown-menu {
  background-color: #000000 !important; /* pure black */
  border-color: #ffffff1a !important; /* subtle light border */
}
nav.navbar .dropdown-menu .dropdown-item {
  color: #ffffff !important;
  border-color: transparent !important;
}
nav.navbar .dropdown-menu .dropdown-item:hover,
nav.navbar .dropdown-menu .dropdown-item:focus {
  background-color: #111827 !important; /* subtle dark */
  color: #ef4444 !important; /* red hover */
  border-color: transparent !important;
}
/* Remove link underlines color inside navbar completely */
nav.navbar a, nav.navbar a:hover, nav.navbar a:focus, nav.navbar a:active { text-decoration: none !important; text-decoration-color: transparent !important; }
/* Kill pseudo-element underlines often used by themes */
nav.navbar .navbar-nav .nav-link::after,
nav.navbar .navbar-nav .nav-link:hover::after,
nav.navbar .navbar-nav .nav-link:focus::after,
nav.navbar .navbar-nav .nav-link.active::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
}
/* Remove focus-visible outlines that might appear blue */
nav.navbar .navbar-nav .nav-link:focus-visible,
nav.navbar .dropdown-item:focus-visible,
nav.navbar .navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Dropdown dividers color */
nav.navbar .dropdown-divider { border-top-color: #ffffff1a !important; }
/* FINAL: Show red lines under navbar links on hover/active */
nav.navbar .navbar-nav .nav-link {
  border-bottom: 2px solid transparent !important;
}
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link:focus,
nav.navbar .navbar-nav .nav-link.active {
  border-bottom-color: #ef4444 !important;
  text-decoration: underline !important;
  text-decoration-color: #ef4444 !important;
  text-underline-offset: 4px;
}
/* Force active state underline/text color to red (override any previous white) */
nav.navbar .navbar-nav .nav-link.active {
  color: #ef4444 !important;
  text-decoration-color: #ef4444 !important;
}

/* Remove any top gap below the navbar that may show white */
.section-1,
.section-3,
main,
header + section {
  margin-top: 0 !important;
  border-top: 0 !important;
}
/* Remove top margin of the immediate next element after navbar to avoid white gap */
.navbar + * { margin-top: -1px !important; }
/* Toggler button image sits on dark bg; remove default outline glow */
nav.navbar .navbar-toggler:focus { box-shadow: none !important; }

.section-1 {
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
.section-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.show-pass {
  cursor: pointer;
}
.section-1::after,
.section-3::after {
  content: '';
  position: absolute;
  width: 100vw;
  height: 100%;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 63%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.section-1.blog-header::after,
.section-3.blog-header::after {
  top: 45%;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #1967ff;
}

.section-3::after {
  z-index: 0;
  background-position: center;
  background-size: contain;
}

.section-3 .container .row {
  position: relative;
  z-index: 1;
  min-height: 450px;
}

.section-3 {
  overflow: hidden;
}

.man-group {
  position: relative;
  height: 480px;
  margin: 2em auto;
}

.man-group span:nth-child(1) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/13.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.man-group span:nth-child(2) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/12.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

.man-group span:nth-child(3) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/11.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

.man-group span:nth-child(4) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/10.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 67% 10%;
  background-size: auto;
  -webkit-animation: shakeX 6s alternate infinite;
  animation: shakeX 6s alternate infinite;
}

.man-group span:nth-child(5) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/9.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 38% 26%;
  background-size: auto;
  -webkit-animation: action 3s alternate infinite;
  animation: action 3s alternate infinite;
}

.man-group span:nth-child(6) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/8.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 80% 35%;
  background-size: auto;
  -webkit-animation: action 4s alternate infinite;
  animation: action 4s alternate infinite;
}

.man-group span:nth-child(7) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/7.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 27% 55%;
  background-size: auto;
  -webkit-animation: action 5s alternate infinite;
  animation: action 5s alternate infinite;
}

.man-group span:nth-child(8) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/6.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 75% 88%;
  background-size: auto;
  -webkit-animation: action 3s alternate infinite;
  animation: action 3s alternate infinite;
}

.man-group span:nth-child(9) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/5.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 24% 83%;
  background-size: auto;
  z-index: 3;
  -webkit-animation: action 3s alternate infinite;
  animation: action 3s alternate infinite;
}

.man-group span:nth-child(10) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/4.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}

.man-group span:nth-child(11) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/3.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 80% 60%;
  background-size: auto;
  -webkit-animation: action 3s alternate infinite;
  animation: action 3s alternate infinite;
}

.man-group span:nth-child(12) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/2.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 24% 46%;
  background-size: auto;
  -webkit-animation: action 2s alternate infinite;
  animation: action 2s alternate infinite;
}

.man-group span:nth-child(13) {
  width: 100%;
  height: 100%;
  background-image: url('../img/group1/1.png');
  position: absolute;
  background-repeat: no-repeat;
  background-position: 77% 77%;
  background-size: auto;
  -webkit-animation: action 3s alternate infinite;
  animation: action 3s alternate infinite;
}

@-webkit-keyframes shakeX {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

@keyframes shakeX {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

@-webkit-keyframes MoveUpDown {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes MoveUpDown {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@-webkit-keyframes action {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes action {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@-webkit-keyframes action2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(20px, -20px);
    transform: translate(20px, -20px);
  }
}

@keyframes action2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(20px, -20px);
    transform: translate(20px, -20px);
  }
}

.owl-brands .owl-stage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100% !important;
}

.card-template-one {
  border-radius: 12px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  min-height: 305px;
  max-width: 250px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.card-template-one * {
  z-index: 1;
}

.card-template-one::before {
  content: '';
  position: absolute;
  background-image: url('../img/card-template-one-before.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
  z-index: 0;
}

.card-template-one.active::before {
  background-image: url('../img/card-template-one-active-before.png');
  visibility: visible;
  opacity: 1;
}

.card-template-one:not(.bg-white):hover::before {
  opacity: 1;
  visibility: visible;
  z-index: 0;
}

.card-template-one:hover:not(.bg-white),
.card-template-one.active:not(.bg-white) {
  background: transparent;
  color: #fff !important;
  border: 1px solid #1967FF;
}

.card-template-one.active {
  max-width: 280px;
  min-height: 450px;
}

.whyus .card-template-one.active {
  min-width: unset;
  min-height: unset;
}

.service-item-table {
  width: 100%;
  overflow-x: auto;
}

.service-item-card .card {
  border: 2.5px solid #98A8BF;
  border-radius: 8px;
  line-height: 20px;
}

.owl-4 .owl-stage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Blog slider - En temiz çözüm */
.blog-section {
  position: relative !important;
}

.blog-section .owl-4 .item {
  position: relative !important;
}

.blog-section .owl-4 .item img {
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  transform: scale(0.98) !important; /* Fotoğrafları 1-2 tık küçült */
}

/* ERAV Roleplay Logosu - Başlığın altında */
.erav-logo-link {
  display: inline-block !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.erav-logo-link:hover {
  text-decoration: none !important;
}

.erav-logo-below-title {
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: circle(50%) !important;
  cursor: pointer !important;
}

.erav-logo-below-title:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Blog Navigasyon Butonları - Fotoğrafın en sol ve sağına */
.blog-nav-buttons {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 10 !important;
  padding: 0 !important; /* Butonlar fotoğrafın tam kenarında */
}

.blog-nav-btn {
  background: rgba(0, 0, 0, 0.6) !important; /* Koyu şeffaf */
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  font-size: 20px !important;
  /* Elmas şekli için transform */
  transform: rotate(45deg) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(5px) !important;
}

/* Pseudo-elementler kaldırıldı - butonların kesilmesini önlemek için */

.blog-nav-btn i {
  transform: rotate(-45deg) !important; /* İkonu düzeltmek için */
  font-size: 18px !important;
}

.blog-nav-btn:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: rotate(45deg) scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

.blog-nav-btn:active {
  transform: rotate(45deg) scale(0.95) !important;
  background: rgba(0, 0, 0, 0.9) !important;
}

.blog-nav-prev {
  margin-left: -9px !important;
  position: relative !important;
  left: -9px !important;
}

.blog-nav-next {
  margin-right: -7px !important;
  position: relative !important;
  right: -7px !important;
}

/* Navigation butonları */
.blog-section .owl-4 .owl-nav {
  display: none !important;
}

.blog-section .owl-4 .owl-nav button {
  background: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  pointer-events: all !important;
  transition: all 0.3s ease !important;
}

.blog-section .owl-4 .owl-nav button:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.1) !important;
}

.blog-section .owl-4 .owl-nav .owl-prev {
  margin-left: 10px !important;
}

.blog-section .owl-4 .owl-nav .owl-next {
  margin-right: 10px !important;
}

section.section-2 .container {
  position: relative;
}

section.section-2 .container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  width: 200px;
  height: 200px;
  background: #1967FF;
  opacity: 1;
  -webkit-filter: blur(128px);
          filter: blur(128px);
  z-index: 0;
}

.service-card {
    background: linear-gradient(118.24deg, rgba(255, 255, 255, 0.1) -9.32%, rgba(255, 255, 255, 0.1) 112.35%);
    width: 95px;
    height: 95px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    border-radius: 8px;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/border.png');
    background-size: cover;
    width: 100%;
    height: 100%;
}
.service-card {
    position: relative;
}
.service-card:hover,
.service-card.active {
  background: #1967FF;
  color: #fff;
}
.service-card:hover::before,.service-card.active::before
{
  display: none;
}
section {
  position: relative;

}

section.section-2::before {
  content: '';
  left: 0;
  width: 460px;
  height: 810px;
  background-image: url('../img/rocket.png');
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  background-repeat: no-repeat;
}

section.section-2 .content {
  z-index: 2;
  position: relative;
}

.tab-menu-area {
  min-height: 500px;
}

.softa * {
  z-index: 1;
  position: relative;
}

.softa::before {
  content: '';
  background: transparent;
  border-radius: 0px 32px 220.5px 0px;
  position: absolute;
  width: 100%;
  height: 320px;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 0;
}

.softa::after {
  content: '';
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 75%, rgba(1, 53, 156, 1) 95%, rgba(1, 53, 156, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(75%, rgba(255, 255, 255, 1)), color-stop(95%, rgba(1, 53, 156, 1)), to(rgba(1, 53, 156, 1)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 75%, rgba(1, 53, 156, 1) 95%, rgba(1, 53, 156, 1) 100%);
  border-radius: 0;
  position: absolute;
  width: 100vw;
  height: 320px;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 0;
  left: -99vw;
}

.softa {
  position: relative;
}

.position-relative.footer-top::after {
  content: '';
  width: calc(50% - 100px);
  height: 2px;
  background: #ef4444;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}

.position-relative.footer-top::before {
  content: '';
  width: calc(50% - 100px);
  height: 2px;
  background: #ef4444;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}

.position-relative.footer-top img {
  margin: 0 auto;
  display: block;
  /* Footer görselini gizlemek için: */
  /* display: none !important; */
  
  /* Veya farklı görsel kullanmak için: */
  /* content: url('yeni-gorsel-yolu.png'); */
}

.social-media a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 20px;
}

.social-media i {
  width: 32px;
  height: 32px;
  border: 1px solid #667093;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.social-media a:hover i {
  background: #1877F2;
  -webkit-box-shadow: 0px 7px 13px rgba(24, 119, 242, 0.25);
          box-shadow: 0px 7px 13px rgba(24, 119, 242, 0.25);
  color: #fff;
  border: 0;
}

.social-media a:hover {
  color: #25396F !important;
}

.footer-link li:not(:first-child) {
  opacity: 0.7;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.footer-link li:not(:first-child):hover {
  opacity: 1;
}

.opacity7 {
  opacity: 0.7;
}

.man-group-2 .rocket {
  z-index: 5;
  position: relative;
  top: 56%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.man-group-2 {
  z-index: 1;
}

.reg-panel {
  position: relative;
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  border-radius: 12px 0 0 12px;
  width: 100%;
    height: 100%;
}

.reg-panel img {
  -webkit-animation: action 3s alternate infinite;
  animation: action 3s alternate infinite;
      position: absolute;
    top: -63px;
    left: 0;
    right: 0;
    bottom: 0;
}

.register {
  z-index: 1;
  position: relative;
}

.register-form {
  -webkit-box-shadow: 0px 47px 30px -22px rgba(0, 0, 0, 0.34);
  box-shadow: 0px 47px 30px -22px rgba(0, 0, 0, 0.34);
  border-radius: 0 12px 12px 0;
}

.table-bordered>:not(caption)>*>* {
  padding: 20px;
}

pre.code {
  background: #EEF3FC;
  border-radius: 16px;
  padding: 2em;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: 2em;
}

.pagi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pagi li a:hover,
.pagi li a.active {
  opacity: 1;
  background: #1967FF;
  color: #fff;
  border: 1px solid #1967FF;
}

.pagi li a {
  width: 60px;
  height: 60px;
  border: 1px solid #25396F;
  border-radius: 50px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 1em;
  opacity: 0.1;
  font-weight: 500;
  font-size: 18px;
  line-height: 19px;
  text-align: center;
  color: #25396F;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: #98A8BF;
}

.row.blog {
  height: 530px;
}

section.blog-content {
  margin-top: -525px;
}

.blog-content p {
  color: #98A8BF;
  font-size: 14px;
  opacity: 0.8;
  font-weight: 300;
  line-height: 25px;
  margin-bottom: 10px;
}

.before-line::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 0;
  bottom: 0;
  background: #1967FF;
  width: 4px;
}

.before-line {
  position: relative;
  margin-left: 15px;
}

.table:not(.api)>:not(caption)>*>* {
  padding: 20px;
  vertical-align: middle;
}

.table:not(.api) tbody tr th,
.table:not(.api) tbody tr td {
  border: 0 !important;
  line-height: 1.7;
}

.side-left {
  position: fixed;
  width: 300px;
  height: auto;

  background: #E7EDF9;
  border-radius: 0px 0px 150px 0px;

}

.panel-menu li a {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #25396F;
  opacity: 0.7;
  padding: 0.98em 1em;
  position: relative;
  display: block;
}

/* PC menüsü için özel kurallar - sadece mobil menü için mavi renk */
.panel-menu li a i {
  color: #1967ff;
}

/* PC menüsünde aktif olmayan ikonlar beyaz olsun */
@media (min-width: 992px) {
  #pcSidebarMenu .panel-menu li a:not(.active) i {
    color: #ffffff !important;
  }
  
  #pcSidebarMenu .panel-menu li a:not(.active) {
    color: #ffffff !important;
  }
}

/* Mobil menü için mavi gradient (sadece mobil) */
@media (max-width: 991.98px) {
  .panel-menu li a.active {
    background: -o-linear-gradient(left, #1967FF 25%, rgba(25, 103, 255, 0) 75%);
    background: -webkit-gradient(linear, left top, right top, color-stop(25%, #1967FF), color-stop(75%, rgba(25, 103, 255, 0)));
    background: linear-gradient(90deg, #1967FF 25%, rgba(25, 103, 255, 0) 75%);
    border-radius: 25px;
    font-weight: 600;
  }

  .panel-menu li a.active,
  .panel-menu li a.active i {
    color: #fff;
    opacity: 1;
  }
}

/* PC menüsü için kırmızı renk (sadece PC) */
@media (min-width: 992px) {
  #pcSidebarMenu .panel-menu li a.active {
    background: #dc3545 !important;
    background-color: #dc3545 !important;
    border-radius: 5px !important;
    padding: 8px 12px !important;
    font-weight: 600;
  }

  #pcSidebarMenu .panel-menu li a.active,
  #pcSidebarMenu .panel-menu li a.active i {
    color: #ffffff !important;
    opacity: 1;
  }
}

.panel-menu-dropdown {
  cursor: pointer;
}

.card-bg-primary>div {
  z-index: 1;
}

.card-bg-primary::before,
.card-bg-turquoise::before,
.card-bg-orange::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../img/card-bg.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  opacity: 0.3;
  z-index: 0;
}

.card-bg-primary,
.card-bg-turquoise,
.card-bg-orange {
  border-radius: 12px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

.card-bg-primary {
  background: -o-linear-gradient(0.82deg, #3076FF -11.22%, #014DE1 131.35%);
  background: linear-gradient(89.18deg, #3076FF -11.22%, #014DE1 131.35%);

}

.card-bg-turquoise {
  background: -o-linear-gradient(0.82deg, #30FFF3 -11.22%, #0168E1 131.35%);
  background: linear-gradient(89.18deg, #30FFF3 -11.22%, #0168E1 131.35%);
}

.card-bg-orange {
  background: -o-linear-gradient(0.82deg, #FF3030 -11.22%, #E16D01 131.35%);
  background: linear-gradient(89.18deg, #FF3030 -11.22%, #E16D01 131.35%);
}


.card-bgg-green {
  background: -o-linear-gradient(left, #20CF86 -13.56%, rgba(32, 207, 134, 0) 89%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-13.56%, #20CF86), color-stop(89%, rgba(32, 207, 134, 0)));
  background: linear-gradient(90deg, #20CF86 -13.56%, rgba(32, 207, 134, 0) 89%);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  border-radius: 6px;
  color: #25396F;
}

.dropdown .fab.fa-instagram {
  background: #f09433;
  background: -o-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
  -webkit-background-clip: text;
          background-clip: text;
  font-size: 14px;
  padding: 2.4px;
  border-radius: 5px;
  color: #FFF;
  font-weight: lighter;
  margin-right: 10px;
}

.dropdown .fab.fa-facebook-square {
  background: #207eff;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 18px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  border-radius: 5px;
  margin-right: 10px;
}

.dropdown .fab.fa-youtube {
  background: #ff0042;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-twitter {
  background: #1da1f2;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-telegram-plane {
  background: #2b9fd2;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-soundcloud {
  background: #ff5836;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-spotify {
  background: #62ffa2;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-discord {
  background: #7289DA;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fas.fa-headset {
  background: #FFD300;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-twitch {
  background: #e600ff;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-pinterest-p {
  background: #ff5858;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fa.fa-music {
  background: #f8004d;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-tiktok {
  background: #f8004d;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fas.fa-globe {
  background: #1a1a1a;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fas.fa-stream {
  background: #ccc;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.dropdown .fab.fa-hotjar {
  background: #ff0000;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 17px;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-right: 10px;
}

.nav-tabs .nav-link {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #98A8BF;
  padding: 1em 2.5em;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #ffffff;
  background-color: #20cf86;
  border-color: #dee2e6 #dee2e6 #fff;
  border-radius: 4px;
}

.nav-balance.nav-tabs .nav-item.show .nav-link,
.nav-balance.nav-tabs .nav-link.active {
  color: #ffffff;
  background: -o-linear-gradient(331.76deg, rgba(25, 103, 255, 0.72) -9.32%, #1967FF 112.35%);
  background: linear-gradient(118.24deg, rgba(25, 103, 255, 0.72) -9.32%, #1967FF 112.35%);
  border-radius: 6px;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:not(:hover) {
  border: 0;
  border-radius: 4px;
}

.nav-tabs .nav-link i {
  font-size: 18px;
}

.nav-balance.nav-tabs .nav-link:not(.active) img {
  opacity: 0.3;
}

.nav-balance.nav-tabs .nav-link:not(.active) {
  border: 1px solid #98A8BF;
  border-radius: 6px;
}
.section-1-extra {
    padding: 100px 0 !important;
}
.zindex3 {
  z-index: 3;
  position: relative;
}



/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */

body.dark-mode,
.dark-mode pre.code,
.dark-mode .card,
.dark-mode .dropdown-menu {
  background: #0F1529;
  color: #fff;
}
.dark-mode nav.navbar,
.dark-mode .bg-light-3,
.dark-mode .side-left {
  background: #0C1123 !important;
}
.dark-mode .pagi li a {
      border: 1px solid #ffffff;
      color: #ffffff;
}
.dark-mode .panel-menu li a:hover {
  color: #fff;
  opacity: 1;
}
.dark-mode .text-dark,
.dark-mode .navbar-light .navbar-nav .nav-link.active,
.dark-mode .navbar-light .navbar-nav .show>.nav-link,
.dark-mode .social-media a:hover,
.dark-mode .table-bordered>:not(caption)>*>*,
.dark-mode .card-bgg-green 
{
  color: #fff !important;
}
.dark-mode .navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7);
}
.dark-mode .section-1{
  background-color: #0F1529;
}
.dark-mode .section-1::before {
  opacity: 0.1;
}
.dark-mode .reg-panel {
    position: relative;
    background-image: url('../img/group1/12-2-dark.png');
        background-position: top right;
}
.dark-mode::-webkit-scrollbar-track {
  background-color: #0F1529;
}

.dark-mode::-webkit-scrollbar {
  background-color: #0F1529;
}
.dark-mode .bg-light , .dark-mode .bg-white {
  background: #0E1526 !important;
}
.dark-mode .form-control,
.dark-mode .input-group-text,
.dark-mode .form-select,
.dark-mode .dropdown-toggle:not(.nav-link),
.dark-mode .card-dark-mode {
  background: #151E34 !important;
  color: #fff;
}
.dark-mode .form-check-input {
  background-color: #151E34;
}
.dark-mode .form-control::-webkit-input-placeholder {
  color: #98A8BF !important;
}
.dark-mode .form-control::-moz-placeholder {
  color: #98A8BF !important;
}
.dark-mode .form-control:-ms-input-placeholder {
  color: #98A8BF !important;
}
.dark-mode .form-control::-ms-input-placeholder {
  color: #98A8BF !important;
}
.dark-mode .form-control::placeholder {
  color: #98A8BF !important;
}
.dark-mode .before-blue * {
    z-index: 1;
    position: relative;
}
.dark-mode .before-blue::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 12%;
    width: 100px;
    height: 100px;
    background: #1967FF;
    opacity: 1;
    -webkit-filter: blur(73px);
    filter: blur(73px);
    z-index: 0;
}
.dark-mode .before-blue {
    position: relative;
}
.dark-mode .text-secondary {
    color: #98A8BF !important;
}
.dark-mode footer .text-dark, .dark-mode footer .text-secondary, .dark-mode .panel-menu li a {
  color: #FFFFFF !important;

opacity: 0.7;
}
.dark-mode .light-dark-switch {
  background: #23293c;
  border-color: #0c1123;
}

/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */
/* DARK MODE !!!! */













@media (min-width: 1850px) {}

@media (min-width:1500px) {}

@media (max-width:1600px) {
  .nav-balance button {
    width: calc(50% - 20px);
    margin: 10px;
  }

  .nav-balance button:last-child {
    width: 100%;
  }
}

@media (min-width:1200px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1335px
  }
}

@media (max-width: 1200px) {
  .text-40 {
    font-size: 30px;
  }

  .btn.w7 {
    font-weight: 500;
  }
}

@media (max-width:1300px) and (min-width: 992px) {}

@media (max-width: 992px) {
  .panel .nav-tabs button {
    width: calc(50% - 20px);
    padding-left: 10px;
    padding-right: 10px;
    background: #fff;
    margin: 10px;
  }

  .panel .nav-tabs button:last-child {
    width: 100%;
  }

  .service-item-table table {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  .register-form {
    border-radius: 12px;
  }

  .navbar-nav li {
    margin: .5em auto;
  }

  .ob-none {
    -o-object-fit: unset;
    object-fit: unset;
  }
}

@media (min-width:992px) {

  .panel {
    padding-left: 350px;
  }
}

@media (max-width:768px) {
  .navbar-brand {
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0;
    right: 0;
    text-align: center;
  }
}

@media (min-width:768px) {}

@media (min-width:576px) {}

@media (max-width:576px) {

  .text-40 {
    font-size: 20px;
  }

}

@media (max-width:450px) {
  .social-media a {
    font-size: 14px;
  }
}
ul.social-media {width: 425px;float: left;display: block !important;}
ul.social-media li {float: left;width: 33%;}

div.cevaplar {display: block;width: 100%;height: auto;overflow: hidden;padding: 20px;margin: 30px 0;height: 400px;overflow-y: auto;}
.conversation-list {margin-bottom: 24px;display: inline-block;position: relative;float: left;}
.conversation-list.right {float: right;}
span.line {display: block;width: 100%;background: #f2f2f2;height: 1px;margin: 15px 0;}

/* FİYAT LİSTESİ İÇİN EN GÜÇLÜ CSS - CUSTOM.CSS'DE */
html body div.panel .search-input,
html body div.panel .form-control.search-input,
html body div.panel input[type="text"],
html body div.panel input[type="search"],
html body div.panel .form-control,
html body div.panel select,
html body div.panel textarea,
html body div.panel .input-group-text,
html body div.panel .border-special-1,
html body div.panel .table,
html body div.panel .table th,
html body div.panel .table td,
html body div.panel .table thead th,
html body div.panel .table tbody tr,
html body div.panel .card,
html body div.panel .btn.bg-success-light {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ÇIKIŞ, DESTEK VE PROFİLİM BUTONLARINI ZORLA ORİJİNAL RENKLERİNE DÖNDÜR - EN GÜÇLÜ */
html body div.panel a[href*="cikis"],
html body div.panel a[href*="cikis"]:hover,
html body div.panel a[href*="cikis"]:focus,
html body div.panel a[href*="cikis"]:active,
html body div.panel a[href*="cikis"]:visited,
html body div.panel .btn.bg-danger,
html body div.panel .btn.bg-danger:hover,
html body div.panel .btn.bg-danger:focus,
html body div.panel .btn.bg-danger:active {
    background-color: #dc3545 !important;
    background: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
}

html body div.panel a[href*="destek"],
html body div.panel a[href*="destek"]:hover,
html body div.panel a[href*="destek"]:focus,
html body div.panel a[href*="destek"]:active,
html body div.panel a[href*="destek"]:visited,
html body div.panel .btn.bg-success,
html body div.panel .btn.bg-success:hover,
html body div.panel .btn.bg-success:focus,
html body div.panel .btn.bg-success:active {
    background-color: #198754 !important;
    background: #198754 !important;
    color: #ffffff !important;
    border-color: #198754 !important;
    border: 1px solid #198754 !important;
}

html body div.panel a[href*="hesabim"],
html body div.panel a[href*="hesabim"]:hover,
html body div.panel a[href*="hesabim"]:focus,
html body div.panel a[href*="hesabim"]:active,
html body div.panel a[href*="hesabim"]:visited,
html body div.panel .btn.border-secondary,
html body div.panel .btn.border-secondary:hover,
html body div.panel .btn.border-secondary:focus,
html body div.panel .btn.border-secondary:active {
    background-color: transparent !important;
    background: transparent !important;
    color: #6c757d !important;
    border-color: #6c757d !important;
    border: 1px solid #6c757d !important;
}

html body div.panel .search-input:focus,
html body div.panel .form-control.search-input:focus,
html body div.panel input[type="text"]:focus,
html body div.panel input[type="search"]:focus,
html body div.panel .form-control:focus,
html body div.panel select:focus,
html body div.panel textarea:focus {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* TÜM METİNLERİ BEYAZ YAP */
html body div.panel .text-dark,
html body div.panel .text-secondary,
html body div.panel .text-secondary-1,
html body div.panel span,
html body div.panel p,
html body div.panel div {
    color: #ffffff !important;
}

/* İKONLARI BEYAZ YAP */
html body div.panel i,
html body div.panel .fas,
html body div.panel .far,
html body div.panel .fab {
    color: #ffffff !important;
}

/* HAMBURGER BUTON KIRMIZI */
html body div.panel img[src*="sidebar-menu.png"] {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

/* HAMBURGER BUTONLARI HER ZAMAN ŞEFFAF - EN GÜÇLÜ */
html body div.panel #hamburgerBtn,
html body div.panel .navbar-toggler,
html body div.panel button[type="button"][id="hamburgerBtn"],
html body div.panel button.navbar-toggler {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html body div.panel #hamburgerBtn:hover,
html body div.panel #hamburgerBtn:focus,
html body div.panel #hamburgerBtn:active,
html body div.panel .navbar-toggler:hover,
html body div.panel .navbar-toggler:focus,
html body div.panel .navbar-toggler:active,
html body div.panel button[type="button"][id="hamburgerBtn"]:hover,
html body div.panel button[type="button"][id="hamburgerBtn"]:focus,
html body div.panel button[type="button"][id="hamburgerBtn"]:active,
html body div.panel button.navbar-toggler:hover,
html body div.panel button.navbar-toggler:focus,
html body div.panel button.navbar-toggler:active {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
div.copyright {display: block;width: 100%;text-align: center;background: #000;padding: 20px 0;margin-top: 20px;color: #fff;}