:root {
    --scrollbg: #f5f5f5;
    --scrollcl: #c5c5c5;

    /* TakipçiHile marka renk paleti (pembe) */
    --tch-primary: #EC4899;
    --tch-primary-dark: #DB2777;
    --tch-primary-light: #FCE7F3;
    --tch-bg: #FFFFFF;
    --tch-text-dark: #111827;
    --tch-text-secondary: #6B7280;

    --bs-primary: var(--tch-primary);
    --bs-primary-rgb: 236, 72, 153;
    --bs-link-color: var(--tch-primary-dark);
    --bs-link-color-rgb: 219, 39, 119;
    --bs-link-hover-color: var(--tch-primary);
    --bs-link-hover-color-rgb: 236, 72, 153;
}

/* Koyu mod (varsa) için de aynı pembe paleti uygula */
[data-bs-theme=dark] {
    --bs-primary: var(--tch-primary) !important;
    --bs-primary-rgb: 236, 72, 153;
}

/* Makale/içerik linkleri gece modunda da gündüz moduyla aynı renkte kalsın. */
[data-bs-theme=dark] {
    --bs-link-color: var(--tch-primary-dark) !important;
    --bs-link-color-rgb: 219, 39, 119 !important;
    --bs-link-hover-color: var(--tch-primary) !important;
    --bs-link-hover-color-rgb: 236, 72, 153 !important;
}

.text-white svg.both path {
  stroke: #fff !important;
  fill:#fff !important;
}
.mobileIcon svg {
    zoom: .7;
}

.text-white svg.only-stroke path {
  stroke: #fff !important;
}

.text-white svg.only-fill path {
  fill:#fff !important;
}

.text-dark svg.both path {
  stroke: #000 !important;
  fill:#000 !important;
}

.text-dark svg.only-stroke path {
  stroke: #000 !important;
}

.text-dark svg.only-fill path {
  fill:#000 !important;
}

.custom-shape-divider-bottom-1710435364 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1710435364 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 93px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1710435364 .shape-fill {
    fill: #efeef7;
}
@media (min-width:768px) {
    .swiper {
        overflow: visible !important;
    }
}
@media (max-width:768px) {
    .desc h1,
    .desc h2,
    .desc h3,
    .desc h4,
    .desc h5,
    .desc h6 {
        font-size: calc(1.255rem + 0.06vw) !important;
    }
}

.desc h1,
.desc h2,
.desc h3,
.desc h4,
.desc h5,
.desc h6 {
    font-size: 1.3rem;
}

.c-scrollbar::-webkit-scrollbar {
    width: 5px;
}
.c-scrollbar::-webkit-scrollbar-track {
    background: #cccccc; 
    border-radius: 5px;
}
.c-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: gray;
}

.quantity {
    background: #edeff6;
}
.quantity input {
    width: 160px;
    height: 50px;
}


.quantity button {
    width: 50px;
    height: 50px;
}

.quantity_card {
    transition: all .3s ease-out;
    border: 2px solid transparent;
    cursor: pointer;
}

.quantity_card:hover,
.quantity_card.selected{
    border: 2px solid #089cf1;
}

.category_card {
    transition: all .3s ease-out;
    border: 2px solid transparent;
    cursor: pointer;
}

.category_card:hover,
.category_card.selected{
    border: 2px solid #089cf1;
}

.category_card:hover .s_icon,
.category_card.selected .s_icon {
    opacity: 1 !important;
}

.s_icon {
    opacity: 0;
    transition: all .3s ease-out;
}
.quantity_card:hover .s_icon,
.quantity_card.selected .s_icon {
    opacity: 1 !important;
}

.payment_method {
    transition: all .3s ease-out;
    border: 2px solid transparent;
    cursor: pointer;
    background: #edeff6;
}
.payment_method:hover,
.payment_method.selected{
    background: #089cf1 !important;
}

.change_color {
    color: #0b0a12;
}
.payment_method:hover .change_color,
.payment_method.selected .change_color{
    color: white;
}

.payment_method:hover .s_icon,
.payment_method.selected .s_icon {
    opacity: 1 !important;
}

.custom_price {
    transition: all .3s ease-out;
    border: 2px solid transparent;
    cursor: pointer;
    background: #edeff6;
}
.custom_price:hover,
.custom_price.selected{
    background: #089cf1 !important;
}

.custom_price:hover .change_color,
.custom_price.selected .change_color{
    color: white;
}

.custom_price:hover .s_icon,
.custom_price.selected .s_icon {
    opacity: 1 !important;
}

.sozlesme_icerik h1, .sozlesme_icerik h2, .sozlesme_icerik h3, .sozlesme_icerik h4, .sozlesme_icerik h5, .sozlesme_icerik h6 {
    font-size: 18px;
    font-weight: 500 !important;
}

.inner-page-content h1, .inner-page-content h2, .inner-page-content h3, .inner-page-content h4, .inner-page-content h5, .inner-page-content h6{
    font-size: 21px;
    font-weight: 500 !important;
}

@media(max-width: 768px) {
    .overflow-mobile-x-scroll {
        overflow-x: scroll;
    }
    .nav-top {
        position: relative !important;
    }    
	.left-400 {
		left: -400% !important;
	}
	[data-bs-theme=dark] .notes:before {
		background-size: 330% !important;
		transform: none !important;
	}
}

@media(min-width: 768px) {
    .nav-top {
        top:calc(100% - 90%);
    }
}

.desc.h-400px.overflow-y-scroll::-webkit-scrollbar {
    width: 5px;
    border-radius: 20px;
    background-color: var(--scrollbg);
}
.desc.h-400px.overflow-y-scroll::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: var(--scrollcl);
}

.p-fit {
    padding-top: .69rem;
    padding-bottom: .69rem;
}

.tooltip {
    z-index: 9999 !important;
}

.hw-3rem {
    height: 3rem !important;
    width: 3rem !important;
}

.h-3rem {
    height: 3rem !important;
}

.hw-40px {
	height: 40px !important;
    width: 40px !important;
}
.navbar-mobile .actions {
    border-bottom: 3px solid var(--bs-primary);
}

.navbar-mobile .actions .item {
    height: 70px;
    box-shadow: 0 -15px 20px #5e677a1f;
    transition: 0.2s;
    position: relative;
}

.navbar-mobile .actions .item.home {
    height: 80px;
    border-radius: 15px 15px 0 0;
    position: relative;
    padding-top: 10px;
}

.navbar-mobile .actions .item.home .count {
    position: absolute;
    top: -6px !important;
    left: unset !important;
    right: unset !important;
    width: fit-content !important;
    padding: 2px 16px;
    padding-bottom: 1px;
    display: block;
    min-width: 20px;
    font-size: 14px;
}

.navbar-mobile .supportArea,
.navbar-mobile .accountArea {
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
}

.navbar-mobile .accountArea.open {
    height: auto;
    overflow: visible;
}

@media(max-width: 768px) {
    .cart-buttons button {
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


#add-favorite {
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-out;
	margin-right: -1rem !important;
}

.product-single:hover #add-favorite {
    opacity: 100%;
    visibility: visible;    
}


.animate-sosyalpot {
	overflow: hidden;
}

.animate-sosyalpot span {
	display: block;
	position: relative;
	z-index: 10;
}

.animate-sosyalpot:hover {
	border-color: transparent !important;
}

.animate-sosyalpot:hover span {
	animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleUpInitial {
	to {
		transform: translate3d(0,-105%,0) scale3d(1,2,1);
		opacity: 0;
	}
}

@keyframes MoveScaleUpEnd {
	from {
		transform: translate3d(0,100%,0) scale3d(1,2,1);
		opacity: 0;
	}
	to {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

.animate-sosyalpot::before, .animate-sosyalpot::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.animate-sosyalpot::before {
	content: '';
	background: var(--bs-btn-hover-bg);
	width: 120%;
	height: 0;
	padding-bottom: 120%;
	top: -110%;
	left: -10%;
	border-radius: 50%;
	transform: translate3d(0,68%,0) scale3d(0,0,0);
}

.animate-sosyalpot:hover::before {
	transform: translate3d(0,0,0) scale3d(1,1,1);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.animate-sosyalpot::after {
	content: '';
	background: var(--bs-btn-hover-bg);
	transform: translate3d(0,-100%,0);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.animate-sosyalpot:hover::after {
	transform: translate3d(0,0,0);
	transition-duration: 0.05s;
	transition-delay: 0.4s;
	transition-timing-function: linear;
}

.hover-bg-primary {
    transition: all .3s ease-out;
}

.hover-bg-primary:hover {
    background-color: #089cf1 !important;
}
.bg-fit {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


/* Sol yönde kayan animasyon */
@keyframes floatLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-3%);
    }
}

/* Sağ yönde kayan animasyon */
@keyframes floatRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(3%);
    }
}

/* Yukarı yönde kayan animasyon */
@keyframes floatUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-3%);
    }
}

/* Aşağı yönde kayan animasyon */
@keyframes floatDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(3%);
    }
}

/* float-left sınıfı için stil */
.float-left {
    animation: floatLeft 1s infinite alternate;
}

/* float-right sınıfı için stil */
.float-right {
    animation: floatRight 1s infinite alternate;
}

/* float-up sınıfı için stil */
.float-up {
    animation: floatUp 1s infinite alternate;
}

/* float-down sınıfı için stil */
.float-down {
    animation: floatDown 1s infinite alternate;
}

.notifications {
  display: none;    
  cursor: pointer;
  position: fixed !important;
  bottom: 90px;
  left: 40px;
  width: 400px;
  display: block;
  z-index: 10000;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}	    
.notifications .icon {
    width: 120px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notifications > div{
	  border: 2px solid rgba(255, 255, 255, 0.7);
  display: none; 
}

@media(max-width:768px) {
    .notifications {
        display: none !important;
    }
}
.howbuy {
    cursor: pointer;
}

.tch-arac-bildirim {
    display: none;
    position: fixed;
    left: 12px;
    bottom: 20px;
    z-index: 10000;
    width: 320px;
    max-width: calc(100% - 24px);
}
.tch-arac-bildirim .tch-ab-ikon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, .25);
}
.tch-arac-bildirim .tch-ab-mesaj {
    font-size: .9rem;
    line-height: 1.3;
}
@media (max-width: 575.98px) {
    .tch-arac-bildirim {
        bottom: 100px;
        left: 10px;
    }
}
/* Gece modunda [data-bs-theme=dark] p{color:...} kuralı yazıyı karartıyordu,
   bildirim metni gece/gündüz her zaman beyaz kalsın. */
.tch-arac-bildirim,
.tch-arac-bildirim .tch-ab-mesaj,
[data-bs-theme=dark] .tch-arac-bildirim,
[data-bs-theme=dark] .tch-arac-bildirim .tch-ab-mesaj {
    color: #fff !important;
}

.howbuy:hover{
    background-color: var(--bs-primary);
}

.howbuy:hover .icon-xl,
.howbuy:hover .icon-lg{
    background-color: white !important;
}

.howbuy:hover .icon-xl i,
.howbuy:hover .icon-lg i{
    color: var(--bs-primary) !important;
}

.howbuy:hover p{
    color: white !important
}

.home #add-favorite {
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}
li.list-group-item .categories:hover .icon-sm {
	background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important	
}

[data-section="packet"],
[data-section="customQuantity"]{
    transition: all .3s ease-out;
}

.hidePackets[data-section="packet"],
[data-section="customQuantity"]{
    opacity: 0;
	visibility: hidden;
	height: 0;
}

.showQuantity[data-section="customQuantity"] {
    opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
}

.allPacketsDiv > div {
    zoom: .9;
}
.allPacketsDiv,
.innerCategories{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.4rem;
}

@media(max-width:768px) {
	.allPacketsDiv,
	.innerCategories{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
ul#servicesList2,
ul#ucretsizList2 {
    margin-top: 8px;
}
/*********** DARK ***********/
/*********** DARK ***********/
/*********** DARK ***********/

[data-bs-theme=dark] .custom-shape-divider-bottom-1710435364 .shape-fill {
    fill:#222529 !important
}

[data-bs-theme=dark] .bg-lines-dark {
    background-image: linear-gradient(to bottom, #222529, #222529c9), url(/themes/sosyalpot/assets/images/lines.svg);
}


[data-bs-theme=dark] input,
[data-bs-theme=dark] textarea,
[data-bs-theme=dark] select{
    background-color: var(--bs-body-bg) !important
}

[data-bs-theme=dark] .navbar-light {
    border: 0 !important;
}

[data-bs-theme=dark] .dark-bg {
    background-color: rgb(22 22 22) !important;
}

[data-bs-theme=dark] .dark-bg-text-white {
    color: white !important;
}

[data-bs-theme=dark] .dropdown-menu {
    border: 0 !important;
    box-shadow: none !important;
}

[data-bs-theme=dark] .shadow {
    box-shadow: none !important;
}

[data-bs-theme=dark] .payment_method,
[data-bs-theme=dark] .custom_price {
    background-color: rgb(34 37 41);
}

[data-bs-theme=dark] .quantity_card,
[data-bs-theme=dark] .category_card {
    background-color: rgb(34 37 41) !important;
}

[data-bs-theme=dark] .table {
    --bs-table-bg: rgb(22 22 22);
}

input#themeToggle {
    height: 2rem;
    width: 4rem;
    margin: 0;
}
.categories:hover {
    box-shadow: 0 0 60px rgba(40, 48, 59, .2);
    transform: scale(1.04);
}
.categories {
    transition: all .1s ease-out;
}

.header_mega.hizmetler {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
}

[data-bs-theme=dark] .breadcrumb,
[data-bs-theme=dark] .breadcrumbb,
[data-bs-theme=dark] .notes {
    background-image: unset !important;
    position:relative;
}


[data-bs-theme=dark] .breadcrumb div,
[data-bs-theme=dark] .breadcrumbb div,
[data-bs-theme=dark] .notes div {
    position:relative;
    z-index: 3;
}

[data-bs-theme=dark] .breadcrumb:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: linear-gradient(to bottom, rgb(8 156 241 / 100%), rgb(8 156 241 / 20%)), url(/themes/sosyalpot/assets/images/lines.svg);
    background-position: 50% 57%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scaleX(-1);
}

[data-bs-theme=dark] .breadcrumbb:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: linear-gradient(to bottom, rgb(8 156 241 / 100%), rgb(8 156 241 / 20%)), url(/themes/sosyalpot/assets/images/lines.svg);
    background-position: 50% 7%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scaleX(-1);
}

@media(max-width:768px) {
	[data-bs-theme=dark] .breadcrumb:before,
	[data-bs-theme=dark] .breadcrumbb:before{
		background-position: 80% 67% !important;
		background-size: 340% !important;
	}
}

[data-bs-theme=dark] .notes:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: linear-gradient(to bottom, rgb(8 156 241 / 100%), rgb(8 156 241 / 20%)), url(/themes/sosyalpot/assets/images/lines.svg);
    background-position: 50% 65%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scaleX(-1);
}


  /* Not: bu bileşen artık metni değişken uzunlukta ("Tüm İnstagram Ücretsiz
     Araçları" gibi) içerdiği için kullanıcı isteğiyle küçültüldü — eski
     16px/12-24px padding'i özellikle daha az yer kaplayan, sıkışık olmayan
     bir buton isteğiyle 13px/6-14px'e düşürüldü. */
  .btn-tumunugor {
    border-radius: var(--bs-border-radius) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    line-height: 1.3;
    transition: all 0.3s ease;
	margin-left: auto;
    margin-right: 0;
  }

  .btn-tumunugor:hover {
    background-color: #444; 
    color: #fff; 
    transform: scale(1.05);
  }
	  .hoverli {
    transition: all 0.3s ease; 
		  
  }

  .hoverli:hover {
    background-color: rgba(0, 0, 0, 0.1); 
    cursor: pointer;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Gölge efekti */
    transform: translateY(-2px); /* Hafif yukarı kaldırma efekti */
  }

  [data-bs-theme="dark"] .hoverli:hover {
    background-color: rgba(255, 255, 255, 0.2); 
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15); /* Açık renkli gölge efekti */
    cursor: pointer; 
  }
/* Yıldızların başlangıç stili */
.stars i {
    font-size: 1.2rem; /* Yıldız boyutu */
    color: gray; /* Boş yıldız başlangıç rengi */
    margin-right: 4px; /* Yıldızlar arası boşluk */
    transition: color 0.3s ease, transform 0.3s ease; /* Renk ve büyüme geçişi */
}


.stars b {
    font-size: 1.2rem; /* Yıldız boyutu */
    color: gray; /* Boş yıldız başlangıç rengi */
    margin-right: 4px; /* Yıldızlar arası boşluk */
    transition: color 0.3s ease, transform 0.3s ease; /* Renk ve büyüme geçişi */
}

.fa-solid.fa-star {
    color: #ffc107 !important; /* Dolu yıldız rengi */
    transform: scale(1.2); /* Hafif büyüme efekti */
}

/* Dolu yıldız */
.fa-solid.active-star {
    color: #ffc107 !important; /* Sarı yıldız rengi */
    transform: scale(1.2); /* Hafif büyüme efekti */
    animation: star-bounce 0.4s ease; /* Hafif zıplama animasyonu */
}

.d-flex.justify-content-center.align-items-center {
    text-align: center; /* Ortada hizalama */
    gap: 8px; /* 5/5 ile yıldızlar arasındaki boşluk */
}


/* Küçük Yıldızlar */
.small-stars i {
    font-size: 0.8rem; /* Yıldız boyutu */
    color: gray; /* Boş yıldız başlangıç rengi */
    margin-right: 4px; /* Yıldızlar arası boşluk */
    transition: color 0.3s ease, transform 0.3s ease; /* Animasyon geçişi */
}

.small-stars .fa-solid.fa-star {
    color: #ffc107 !important; /* Dolu yıldız rengi */
    transform: scale(1.1); /* Hafif büyüme efekti */
}

/* Sayaç */
.custom-counter {
    font-size: 0.9rem; /* Sayaç boyutu */
    font-weight: bold;
}

.custom-counter .count {
    font-size: 1rem; /* Sayı boyutu */
    color: #ffffff; /* Beyaz renk */
}




/* Hafif zıplama animasyonu */
@keyframes star-bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1.2);
    }
}


.contact-bar .icon {
    transition: all .3s ease-out;
    cursor: pointer;
    color: white;
    background-color: aliceblue;
    border: 2px solid rgba(255, 255, 255, 0.7); /* %70 opaklıkta beyaz kenarlık */
    border-radius: 4px; /* Kenarları yuvarlatmak için isteğe bağlı */
}

/* Genel Pop-Up Alanı */
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px); /* Arka plan bulanık */
    background: rgba(0, 0, 0, 0.7); /* Hafif karartma */
}

/* Pop-Up İçerik */
.popup-body {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    z-index: 100000; /* Pop-up içeriği en üstte olmalı */
    text-align: center;
    transition: all 0.3s ease;
}

/* Primary Color Katmanı */
.popup-overlay-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color, #007bff); /* Primary renk */
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.5s ease; /* Geçiş animasyonu */
    z-index: 3; /* Renk Katmanı */
}

/* İçerik Alanı */
.popup-inner {
    position: absolute;
    top: -100px; /* Başlangıçta yukarıda */
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0; /* Başlangıçta görünmez */
    transition: all 0.8s ease; /* Animasyon */
    z-index: 4; /* Yazılar ve Logo */
    color: white;
    text-align: center;
    padding: 20px;
}

.popup-inner.visible {
    top: 50%; /* Ortaya animasyonlu şekilde gelir */
    opacity: 1; /* Görünür olur */
    transform: translate(-50%, -50%);
}

.popup-logo-container {
    display: flex;
    justify-content: center; /* Logoyu yatay olarak ortalar */
    align-items: center; /* Logoyu dikey olarak ortalar */
    margin-bottom: 20px; /* Alt boşluk */
}

/* Logo */
.popup-logo {
    margin: 0 auto;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 100px; /* Logo yüksekliği */
    width: 100%; /* Logo genişliği */
    margin-bottom: 15px; /* Alt boşluk */
}

/* Başlık ve Mesaj */
.popup-title {
    font-size: 24px;
    margin-bottom: 10px;
    color: white;
}

.popup-message {
    font-size: 16px;
    margin-bottom: 20px;
    color: white !important; 
}

/* Buton */
.popup-button {
    display: inline-block;
    padding: 10px 20px;
    background: transparent; /* Başlangıçta şeffaf */
    color: white; /* Yazı rengi */
    border: 1px solid white; /* Beyaz çerçeve */
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease; /* Geçiş animasyonu */
}

.popup-button:hover {
    background: rgba(255, 255, 255, 0.2); /* Hover için hafif opak arka plan */
    color: white; /* Yazı rengi değişmez */
}

.popup-close {
    position: absolute;
    top: 50%; /* Dikeyde ortalamak için */
    left: 50%; /* Yatayda ortalamak için */
    transform: translate(-50%, -50%) scale(0); /* Başlangıçta küçült ve tam ortala */
    padding: 10px 15px; /* Daha dengeli padding */
    background: transparent;
    color: white;
    border: 1px solid white;
    border-radius: 5px; /* Yuvarlak tasarım */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Geçiş animasyonu */
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.3); /* Hover için daha belirgin opaklık */
    color: black; /* Hover için yazı rengini değiştirin */
    transform: translate(-50%, -50%) scale(1.1); /* Hover'da hafif büyüme */
}

.popup-close.visible {
    opacity: 1; /* Görünür olur */
    transform: translate(-50%, -50%) scale(1); /* Normal boyutuna büyür ve tam ortalanır */
}


.slider-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    position: relative;
    flex-shrink: 0;
}

.slider-logo img {
    width: 35px;
    height: 35px;
}


.kartanesi {
    position: fixed;
    top: -5%; /* Başlangıç pozisyonu ekranın üst kısmı */
    z-index: 9999;
    color: #ffffff; /* Beyaz renk */
    font-size: 1.2em; /* Küçük kar tanesi boyutu */
    font-family: 'Arial', sans-serif; /* Yazı tipi */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
    user-select: none; /* Seçilemez */
    pointer-events: none; /* Tıklanamaz */
    opacity: 0.8; /* Opaklık azaltıldı (daha şeffaf görünüm) */
    animation-name: kartanesi-dusme, kartanesi-sallanma;
    animation-duration: 20s, 5s; /* Yavaş düşme ve daha fazla sallanma süreleri */
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

/* Kar tanelerinin aşağı doğru düşme hareketi */
@keyframes kartanesi-dusme {
    0% {
        top: -10%; /* Yukarıda başla */
    }
    100% {
        top: 110%; /* Aşağıda kaybol */
    }
}

/* Kar tanelerinin sağa sola sallanma hareketi */
@keyframes kartanesi-sallanma {
    0%, 100% {
        transform: translateX(-30px); /* Daha fazla sola hareket */
    }
    50% {
        transform: translateX(30px); /* Daha fazla sağa hareket */
    }
}

/* Gündüz modu için hover efekti */
.hover-effect {
    transition: all 0.3s ease-in-out;
    cursor: default; /* Normal ok işareti */
}

.hover-effect:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Gölge efekti */
    transform: translateY(-2px); /* Hafif yukarı kaldırma efekti */
}

/* Gece modu için hover efekti */
[data-bs-theme="dark"] .hover-effect:hover {
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15); /* Açık renkli gölge efekti */
    background-color: rgba(255, 255, 255, 0.1); /* Hafif arka plan rengi */
}

/* =========================================================================
   MAVİ -> PEMBE GEÇİŞİ (tema derlemesinde --bs-primary değişkenine bağlı
   olmayıp doğrudan #089cf1 hex kodu gömülü kalan Bootstrap bileşenleri).
   İki ton kullanılıyor: --tch-primary (açık pembe) ve --tch-primary-dark
   (koyu pembe, hover/active durumları için). Bu blok style.css'ten SONRA
   yüklendiği için üzerine yazar; style.css dosyasına dokunulmuyor.
   ========================================================================= */

/* Checkbox / radio */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--tch-primary) !important;
    border-color: var(--tch-primary) !important;
}

/* Range slider */
.form-range::-webkit-slider-thumb {
    background-color: var(--tch-primary) !important;
}
.form-range::-moz-range-thumb {
    background-color: var(--tch-primary) !important;
}

/* Outline butonlar */
.btn-outline-primary {
    --bs-btn-color: var(--tch-primary);
    --bs-btn-border-color: var(--tch-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tch-primary-dark);
    --bs-btn-hover-border-color: var(--tch-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tch-primary-dark);
    --bs-btn-active-border-color: var(--tch-primary-dark);
    --bs-btn-disabled-color: var(--tch-primary);
    --bs-btn-disabled-border-color: var(--tch-primary);
}

/* Soft (pastel) buton */
.btn-primary-soft {
    color: var(--tch-primary-dark);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}
.btn-primary-soft:active,
.btn-primary-soft:hover,
.btn-primary-soft:focus {
    color: #fff;
    background-color: var(--tch-primary);
    border-color: var(--tch-primary);
}

/* Dropdown menüler */
.dropdown-menu {
    --bs-dropdown-link-hover-color: var(--tch-primary-dark);
    --bs-dropdown-link-active-color: var(--tch-primary-dark);
}
.dropdown-menu-dark {
    --bs-dropdown-link-active-color: var(--tch-primary-light);
}

/* Pills / sekmeler */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tch-primary);
}

/* Navbar (koyu varyant) hover/active */
.navbar-dark,
.navbar[data-bs-theme=dark] {
    --bs-navbar-hover-color: var(--tch-primary-light) !important;
    --bs-navbar-active-color: var(--tch-primary-light) !important;
}

/* Sayfalama (pagination) */
.pagination {
    --bs-pagination-hover-bg: var(--tch-primary-dark);
    --bs-pagination-hover-border-color: var(--tch-primary-dark);
    --bs-pagination-active-bg: var(--tch-primary);
    --bs-pagination-active-border-color: var(--tch-primary);
}

/* Liste grupları */
.list-group {
    --bs-list-group-active-bg: var(--tch-primary);
    --bs-list-group-active-border-color: var(--tch-primary);
}

/* SVG dolgu yardımcı sınıfı */
.fill-primary {
    fill: var(--tch-primary) !important;
}

/* Paket / kategori / ödeme yöntemi kartlarındaki mavi çerçeve-arkaplan vurguları */
.quantity_card:hover,
.quantity_card.selected,
.category_card:hover,
.category_card.selected {
    border-color: var(--tch-primary) !important;
}

.payment_method:hover,
.payment_method.selected,
.custom_price:hover,
.custom_price.selected {
    background: var(--tch-primary) !important;
}

.hover-bg-primary:hover {
    background-color: var(--tch-primary-dark) !important;
}

/* NOT: lines.svg dosyasının kendisi BEYAZ (fill:#fff) çizgi desenidir — aynı
   dosya hem gündüz hem gece modunda kullanılıyor, farkı SADECE üzerine binen
   gradyanın rengi/koyuluğu yaratıyor. Önceki gündüz gradyanı en açık durağı
   #F472B6 (çok açık pembe) idi; bu ton beyaz çizgilerle kontrastı çok
   düşürüyor, gradyanın o bölgesinde desen neredeyse hiç görünmeyip "dümdüz
   tek sade renk" gibi kalıyordu. Artık gündüz gradyanı da (gece gibi) daha
   koyu/doygun pembe durakları kullanıyor — böylece çizgi deseni gradyanın
   HER yerinde net okunuyor, gece modu ise ayrıca daha da koyu/mor-bordoya
   kayan bir son durakla gündüzden görsel olarak açıkça ayrışıyor. */
.bg-primary-lines {
    background-image: linear-gradient(135deg, #EC4899 0%, #DB2777 60%, #9D174D 100%), url(/themes/sosyalpot/assets/images/lines.svg) !important;
}

/* Gece modunda aynı alan daha koyu/doygun bir pembeye-bordoya kayar (gündüzden görünür şekilde farklı, çizgi deseni yine net okunur). */
[data-bs-theme=dark] .bg-primary-lines {
    background-image: linear-gradient(135deg, #9D174D 0%, #500724 100%), url(/themes/sosyalpot/assets/images/lines.svg) !important;
}

[data-bs-theme=dark] .breadcrumb:before,
[data-bs-theme=dark] .breadcrumbb:before,
[data-bs-theme=dark] .notes:before {
    background-image: linear-gradient(to bottom, rgba(219, 39, 119, 1), rgba(219, 39, 119, 0.2)), url(/themes/sosyalpot/assets/images/lines.svg) !important;
}

/* Genel pop-up katmanı */
.popup-overlay-color {
    background: var(--tch-primary, #EC4899);
}

/* Sıkça Sorulan Sorular (SSS) / accordion bileşenleri: açık soruların
   rengi ve ok ikonu (SVG data-URI, Bootstrap derlemesinde #493cc3 mor /
   koyu modda #6ea8fe mavi olarak gömülüydü) iki pembe tonuna çevrildi. */
.accordion {
    --bs-accordion-active-color: var(--tch-primary-dark);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23DB2777'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FCE7F3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ===== İçerikler Tablosu (otomatik oluşan makale TOC kutusu) =====
   IcerikTablosuUret() ile üretilen liste; makale kutusunun solunda,
   gece/gündüz modu uyumlu ve responsive (mobilde normal akışa döner,
   masaüstünde sticky kalır). */
.tch-toc {
    border: 1px solid rgba(var(--bs-primary-rgb), .15);
}
.tch-toc .tch-toc-title {
    color: var(--tch-primary-dark);
}
[data-bs-theme=dark] .tch-toc .tch-toc-title {
    color: var(--tch-primary-light);
}
.tch-toc-list .nav-link {
    color: var(--tch-text-secondary, #6B7280);
    padding: .35rem .5rem;
    border-radius: .375rem;
    font-size: .875rem;
    line-height: 1.3;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.tch-toc-list .nav-item.tch-toc-level-3 .nav-link { padding-left: 1.25rem; font-size: .82rem; }
.tch-toc-list .nav-item.tch-toc-level-4 .nav-link { padding-left: 2rem; font-size: .8rem; }
.tch-toc-list .nav-link:hover,
.tch-toc-list .nav-link:focus {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--tch-primary-dark);
}
[data-bs-theme=dark] .tch-toc-list .nav-link:hover,
[data-bs-theme=dark] .tch-toc-list .nav-link:focus {
    color: var(--tch-primary-light);
}

/* İçindekiler kutusu ile yanındaki kaydırılabilir makale kutusu AYNI
   yükseklikte olsun: ikisi de tek bir değişkene (--tch-toc-height) bağlı,
   kendi içlerinde kayan (overflow-y:auto) kutular. Not: eskiden sadece
   .tch-toc-list (iç liste) kayardı, .tch-toc kutusunun kendisi ve makale
   kutusu (.inner-page-content / .desc) sınırsız uzuyordu — bu yüzden ikisi
   farklı boylardaydı. Artık dış kutuların ikisi de aynı max-height'e sahip. */
:root {
    --tch-toc-height: 70vh;
}
.tch-toc {
    max-height: var(--tch-toc-height);
    overflow-y: auto;
}
.tch-toc-list {
    max-height: none;
    overflow-y: visible;
}
.inner-page-content,
.desc.h-400px.overflow-y-scroll {
    max-height: var(--tch-toc-height) !important;
    height: auto !important;
    overflow-y: auto !important;
}
@media (max-width: 991.98px) {
    .tch-toc {
        position: static !important;
        margin-bottom: 1.5rem;
        max-height: none !important;
        overflow: visible !important;
    }
    .tch-toc-list {
        max-height: none;
    }
    /* Mobilde kutulu kaydırma yerine sayfanın normal akışında göster
       (masaüstündeki .tch-toc ile aynı davranış). */
    .inner-page-content,
    .desc.h-400px.overflow-y-scroll {
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
    }
}


/* Gece/gündüz değiştirme anahtarı: pembe üst çubukta seçilemiyor/fark
   edilmiyordu (Bootstrap'ın varsayılan soluk switch rengi pembe zeminde
   kayboluyordu). Anahtarı biraz büyütüp her zaman görünür bir kontur/iz
   rengi verdik. */
#darkModeSwitch {
    width: 2.6em;
    height: 1.35em;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .35) !important;
    border: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow: none !important;
}
#darkModeSwitch:checked,
#darkModeSwitchSticky:checked {
    background-color: var(--tch-primary-dark) !important;
    border-color: #fff !important;
}
#darkModeSwitch:focus,
#darkModeSwitchSticky:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35) !important;
}
.mode-switch {
    color: #fff !important;
}

header.header-sticky-on .mode-switch {
    color: var(--tch-primary) !important;
}
[data-bs-theme="dark"] header.header-sticky-on .mode-switch {
    color: #fff !important;
}

/* Üst bilgi çubuğunun sağ tarafı, gece/gündüz anahtarı hariç boştu (özellikle
   oturum açmamış ziyaretçilerde "Siparişlerim" linki de görünmediği için).
   Anahtarın yanına, girişe gerek olmayan iki hızlı bağlantı eklendi. */
.top-quick-links a {
    color: #fff !important;
    opacity: .92;
    transition: opacity .15s ease-in-out;
    white-space: nowrap;
}
.top-quick-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

#instagramMenu:not(button),
#tiktokMenu:not(button) {
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    transition: opacity .25s ease-out, visibility .25s ease-out;
}
#instagramMenu.sp-show,
#tiktokMenu.sp-show {
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 99998 !important;
}
/* Araç sayısı çok artarsa menü ekranı taşırmasın, kendi içinde kaysın. */
#instagramMenu.sp-show > div,
#tiktokMenu.sp-show > div {
    max-height: calc(100vh - 18vh);
    overflow-y: auto;
}
#instagramMenu.sp-show > div::-webkit-scrollbar,
#tiktokMenu.sp-show > div::-webkit-scrollbar {
    width: 5px;
    border-radius: 20px;
    background-color: var(--scrollbg);
}
#instagramMenu.sp-show > div::-webkit-scrollbar-thumb,
#tiktokMenu.sp-show > div::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: var(--scrollcl);
}
/* Kapatma düğmesi menünün içeriğinin üstünde kalsın (tıklanabilirlik). */
#instagramMenu .hizmet-kapat,
#tiktokMenu .hizmet-kapat {
    z-index: 2;
}

/* Genel/tekrar kullanılabilir mega-menü bileşenleri: eskiden sadece İnstagram'a
   özel, sabit renkli .ig-menu-intro/.ig-menu-item vardı. Artık header.php'de her
   platform için üretilen .plat-tint-{slug} sınıfının verdiği --tch-rgb değişkeni
   üzerinden HER platform (İnstagram, Tiktok, Ücretsiz Araçlar mega menüsü ve
   ileride eklenecek yeni platformlar dahil) aynı gradyan/hover/animasyon setini
   kendi kurumsal rengiyle kullanabiliyor. */
.plat-menu-intro {
    background: linear-gradient(145deg,
        rgba(var(--tch-rgb), 1) 0%,
        rgba(var(--tch-rgb), .82) 55%,
        rgba(var(--tch-rgb), .65) 100%);
}
.plat-menu-item {
    border: 1px solid rgba(0, 0, 0, .06);
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out, transform .15s ease-in-out,
        box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}
.plat-menu-item:hover {
    border-color: rgba(var(--tch-rgb), .55);
    background-color: rgba(var(--tch-rgb), .06);
    transform: translateY(-2px);
    box-shadow: 0 .35rem .75rem rgba(var(--tch-rgb), .22);
}
[data-bs-theme=dark] .plat-menu-item {
    border-color: rgba(255, 255, 255, .08);
    background-color: rgba(255, 255, 255, .02);
}
[data-bs-theme=dark] .plat-menu-item:hover {
    border-color: rgba(var(--tch-rgb), .6);
    background-color: rgba(var(--tch-rgb), .14);
    box-shadow: 0 .35rem .85rem rgba(var(--tch-rgb), .3);
}

/* Mega menü açıldığında kartlar/satırlar hafif kayarak+belirerek gelsin —
   "sönük/statik" değil, canlı bir giriş animasyonu. Satırlar kademeli (stagger)
   şekilde sırayla belirir. */
@keyframes platMenuGiris {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.sp-show .plat-menu-intro,
.sp-show .plat-menu-item {
    animation: platMenuGiris .32s ease-out both;
}
.sp-show .plat-menu-item:nth-child(1) { animation-delay: .02s; }
.sp-show .plat-menu-item:nth-child(2) { animation-delay: .05s; }
.sp-show .plat-menu-item:nth-child(3) { animation-delay: .08s; }
.sp-show .plat-menu-item:nth-child(4) { animation-delay: .11s; }
.sp-show .plat-menu-item:nth-child(5) { animation-delay: .14s; }
.sp-show .plat-menu-item:nth-child(6) { animation-delay: .17s; }
.sp-show .plat-menu-item:nth-child(7) { animation-delay: .2s; }
.sp-show .plat-menu-item:nth-child(8) { animation-delay: .23s; }
.sp-show .plat-menu-item:nth-child(n+9) { animation-delay: .26s; }

/* Anasayfadaki "Tüm Ücretsiz Araçlar" CTA butonu: eskiden düz mavi/pembe
   tek renkti; artık gradient, hover'da belirgin ve gece/gündüz uyumlu. */
.btn-tum-araclar {
    background: linear-gradient(135deg, var(--tch-primary) 0%, var(--tch-primary-dark) 100%);
    color: #fff !important;
    border: 0;
    padding: .65rem 1.5rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out;
    box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .35);
}
.btn-tum-araclar:hover,
.btn-tum-araclar:focus {
    color: #fff !important;
    background: linear-gradient(135deg, var(--tch-primary-dark) 0%, var(--tch-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(var(--bs-primary-rgb), .45);
}
[data-bs-theme=dark] .btn-tum-araclar {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .45);
}




/* 1) Ücretsiz araç sayfasındaki açıklama metni: mobilde "w-75" yüzünden
      blok %75 genişlikte ve sola kaymış duruyordu, ortalı görünmüyordu.
      Mobilde tam genişlik + ortalanmış; masaüstünde (lg ve üstü) w-75 aynen
      kalır. */
@media (max-width: 991.98px) {
    .arac-aciklama {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }
}

/* 2) Bildirim açılır menüsü mobilde çok büyük açılıyordu (min-width 22rem =
      352px + negatif margin). Mobilde ekrana sığan, kendi içinde kayan,
      daha derli toplu bir panel olarak açılır. */
@media (max-width: 767.98px) {
    header .dropdown-menu-size-md {
        min-width: 0 !important;
        width: calc(100vw - 24px) !important;
        max-width: 340px !important;
        margin-right: 0 !important;
    }
    header .dropdown-menu-size-md.left-400 {
        left: auto !important;
    }
    header .dropdown-menu-size-md .card-body {
        max-height: 55vh;
        overflow-y: auto;
    }
    header .dropdown-menu-size-md .list-group-item {
        padding: .6rem !important;
    }
    header .dropdown-menu-size-md .hw-3rem {
        height: 2.25rem !important;
        width: 2.25rem !important;
    }
    header .dropdown-menu-size-md .row.align-items-center {
        gap: .5rem !important;
        flex-wrap: nowrap;
    }
    header .dropdown-menu-size-md .col-2 {
        flex: 0 0 auto;
        width: auto;
    }
    header .dropdown-menu-size-md p.small {
        font-size: .78rem;
        line-height: 1.35;
    }
    header .dropdown-menu-size-md .card-header {
        padding: .6rem .75rem;
    }
}


/* --- Dolu birincil düğme (en görünür olan) --- */
.btn-primary {
    --bs-btn-bg: var(--tch-primary);
    --bs-btn-border-color: var(--tch-primary);
    --bs-btn-hover-bg: var(--tch-primary-dark);
    --bs-btn-hover-border-color: var(--tch-primary-dark);
    --bs-btn-active-bg: var(--tch-primary-dark);
    --bs-btn-active-border-color: var(--tch-primary-dark);
    --bs-btn-disabled-bg: var(--tch-primary);
    --bs-btn-disabled-border-color: var(--tch-primary);
    --bs-btn-focus-shadow-rgb: 236, 72, 153;
}

/* --- Outline düğme hover'ı da açık mavi kalmıştı --- */
.btn-outline-primary {
    --bs-btn-hover-bg: var(--tch-primary-dark);
    --bs-btn-hover-border-color: var(--tch-primary-dark);
    --bs-btn-focus-shadow-rgb: 236, 72, 153;
}

/* --- Bildirim düğmesi ve bildirim satırlarındaki ikon kutuları --- */
header .nav-notification.btn-primary,
header .dropdown-menu .btn-primary,
header .dropdown-menu .btn-primary i {
    color: #fff;
}
header .dropdown-menu .btn-primary {
    background-color: var(--tch-primary);
    border-color: var(--tch-primary);
}

/* --- Liste grubu seçili öğe --- */
.list-group {
    --bs-list-group-active-bg: var(--tch-primary);
    --bs-list-group-active-border-color: var(--tch-primary);
}

/* --- SVG dolgusu --- */
.fill-primary {
    fill: var(--tch-primary) !important;
}

/* --- Odak halkaları (mor/mavi kalmıştı) --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    border-color: var(--tch-primary);
}

/* --- Gradient arka planlar --- */
.bg-primary-gradient-reverse {
    background: linear-gradient(0deg, rgba(236, 72, 153, 1) 0%, rgba(0, 0, 0, 0) 90%);
}
.bg-login-lines {
    background-image: linear-gradient(135deg, #F472B6 0%, #EC4899 45%, #DB2777 100%),
                      url(/themes/sosyalpot/assets/images/lines.svg);
}

/* --- Kalan her yer için güvenlik ağı: doğrudan renk sınıfları --- */
.text-primary {
    color: var(--tch-primary) !important;
}
.bg-primary {
    background-color: var(--tch-primary) !important;
}
.border-primary {
    border-color: var(--tch-primary) !important;
}

/* NOT: ":not(.bg-opacity-100)" koruması var — çünkü paketler.php'de bazı
   kutular BİLEREK "bg-opacity-10 bg-primary bg-opacity-100" ikisini birden
   taşıyor (beyaz ikon + TAM DOLU pembe zemin istendiği için, önceki bir
   turda eklenmiş bir çözüm). O kutular bu yeni kuraldan etkilenmesin. */
.bg-primary.bg-opacity-10:not(.bg-opacity-100) { background-color: rgba(236, 72, 153, .1)  !important; }
.bg-primary.bg-opacity-25:not(.bg-opacity-100) { background-color: rgba(236, 72, 153, .25) !important; }
.bg-primary.bg-opacity-50:not(.bg-opacity-100) { background-color: rgba(236, 72, 153, .5)  !important; }
.bg-primary.bg-opacity-75:not(.bg-opacity-100) { background-color: rgba(236, 72, 153, .75) !important; }
a.text-primary:hover,
a.text-primary:focus {
    color: var(--tch-primary-dark) !important;
}

/* Çizgiler <header> etiketinin KENDİSİNDE (.border-top / .border-bottom
   sınıfları). Gündüz modunda --bs-border-color açık gri olduğu için pembe
   zeminde beyaz görünüyor; gece modunda aynı değişken koyulaştığı için
   çizgiler kayboluyordu. Burada değişkeni header kapsamında sabitliyoruz,
   böylece her iki modda da aynı ayrım duruyor. */
/* 11. TUR: Önceki kural yeterli olmadı — çizgiler hâlâ gece modunda
   kayboluyordu. Artık renk hem değişken üzerinden hem de doğrudan kenarlık
   kısayoluyla, `html[...]` ön ekiyle daha yüksek özgüllükte veriliyor ve
   gündüz modunda da aynı beyaz ton kullanılıyor — iki modda birebir aynı. */
header.header-sticky.border-top,
header.header-sticky.border-bottom,
html[data-bs-theme=dark] header.header-sticky.border-top,
html[data-bs-theme=dark] header.header-sticky.border-bottom {
    --bs-border-color: rgba(255, 255, 255, 0.55);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.55);
}
html header.header-sticky.border-top,
html[data-bs-theme=dark] header.header-sticky.border-top,
html[data-bs-theme=light] header.header-sticky.border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.55) !important;
}
html header.header-sticky.border-bottom,
html[data-bs-theme=dark] header.header-sticky.border-bottom,
html[data-bs-theme=light] header.header-sticky.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
}

[data-bs-theme=dark] header.header-sticky .vr {
    background-color: rgba(255, 255, 255, 0.35);
}

header.header-sticky,
header.header-sticky-on {
    position: relative;
    z-index: 1060;
}
header.header-sticky-on {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* Açılan menüler (mega menü, bildirim, profil, kurumsal) header'ın içinde
   ama yine de en üstte dursun. */
header .sp-menu,
header .dropdown-menu,
header .navbar-nav .dropdown-menu {
    z-index: 1065;
}

/* Sayfa içi yapışkan kutular header'ın ALTINDA kalsın */
.tch-toc,
.sticky-lg-top,
.nav-top.sticky-lg-top {
    z-index: 1010;
}

/* Mega menü açıkken sayfa içeriği hiçbir şekilde üste çıkmasın */
header .sp-menu.sp-show {
    z-index: 1070;
}

/* Ücretsiz araçlar mega menü: araç sayacı */
.navbar-nav .dropdown > .dropdown-toggle[data-toggle="ucretsizMenu"]:active,
.navbar-nav .dropdown > .dropdown-toggle[data-toggle="instagramMenu"]:active,
.navbar-nav .dropdown > .dropdown-toggle[data-toggle="tiktokMenu"]:active,
.navbar-nav .dropdown > .dropdown-toggle[data-toggle="kurumsalMenu"]:active {
    /* 18.39/18.40'ta "ucretsizMenu"/"instagramMenu" için düzeltilen, "tiktokMenu" için
    sonradan eklenen, ama "kurumsalMenu" için de UNUTULAN aynı kusur (Round 14'te ortaya
    çıktı): style.css'in ".dropdown-toggle:active{pointer-events:none}" kuralı, fare
    tıklamasında linki anlık olarak tıklanamaz yapıyor — mouseup olayı <a> yerine üstteki
    <li>'ye düşüyor, bu yüzden "Kurumsal" menüsü hiç açılmıyordu (ne tıklayınca ne de
    üzerine gelince, çünkü Round 14'ten beri zaten sadece tıklama ile açılıyor). */
    pointer-events: auto !important;
}

#ucretsizMenu .tch-mega-arac-sayac {
    display: none !important;
}

header.header-sticky-on #ucretsizMenu .tch-mega-arac-sayac {
    display: flex !important;
    position: sticky;
    bottom: -1rem;
    z-index: 2;
    margin-bottom: -1rem;
}

header:not(.header-sticky-on) #ucretsizMenu > .rounded {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.tch-mega-sayac-dis {
    padding: 1rem;
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
    background-position: center;
    background-size: cover;
}

header.header-sticky-on #ucretsizMenu .tch-mega-sayac-dis {
    display: none !important;
}

.tch-sayac-btn {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
}

.tch-sayac-btn:hover,
.tch-sayac-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(236, 72, 153, .3);
}

.tch-sayac-btn i {
    display: inline-block;
    transition: transform .15s ease-in-out;
}

.tch-sayac-btn:hover i {
    transform: translateX(3px);
}

.tch-sayac-btn-beyaz {
    background-color: #fff;
    color: var(--tch-primary);
    border: 1px solid #fff;
}

.tch-sayac-btn-beyaz:hover,
.tch-sayac-btn-beyaz:focus {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.modal-backdrop {
    z-index: 1080 !important;
}
.modal.show,
.modal.fade.show {
    z-index: 1090 !important;
}


/* --- Logo yüksekliği 50px -> 70px (kullanıcı isteği) --- */
.navbar-expand-lg .navbar-brand .navbar-brand-item,
.navbar .navbar-brand .navbar-brand-item {
    height: 70px;
}
/* Yapışkan hâldeyken logo biraz küçülsün ki bar şişmesin */
header.header-sticky-on .navbar-brand .navbar-brand-item {
    height: 60px !important;
}
/* --- Mobilde (hamburger menüsünün göründüğü <992px genişlik) logo eskisi gibi
küçük kalsın: 70px'lik masaüstü büyütmesi (yukarıdaki kural) dar ekranlarda logoyu
navbar'ın çok büyük bir kısmını kaplayacak şekilde genişletiyordu (bildirim/menü
ikonlarını sıkıştırıyordu). Bu, temanın kendi orijinal mobil boyutuna (style.css,
"@media (max-width: 991.98px) .navbar-expand-lg .navbar-brand .navbar-brand-item")
geri dönüş — logo solda, bildirim + menü ikonu sağda kalıyor, sadece logo küçülüyor. */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-brand .navbar-brand-item,
    .navbar .navbar-brand .navbar-brand-item {
        height: 45px;
    }
    header.header-sticky-on .navbar-brand .navbar-brand-item {
        height: 40px !important;
    }
}

.tch-sticky-tema {
    display: none;
    align-items: center;
    gap: .5rem;
    margin-left: .75rem;
}
@media (min-width: 992px) {
    .header-sticky-on .tch-sticky-tema {
        display: inline-flex;
    }
}
.tch-sticky-tema .form-check-input {
    margin: 0;
    cursor: pointer;
}
.tch-sticky-tema .mode-switch {
    opacity: .75;
}

header.header-sticky-on {
    background-color: var(--bs-body-bg) !important;
}

/* Bildirim zili, profil rozeti ve mobil menü (hamburger) düğmesi iç
   sayfalarda normalde ("dururken") pembe zemin üstünde okunaklı olması için
   BEYAZ tasarlanmış ("btn-white" / "bg-white"). Header yapışkan hâlde
   anasayfadaki gibi beyaza döndüğünde bu düğmeler de anasayfadaki gibi
   PEMBE olsun (beyaz-üstü-beyaz görünüp "kaybolmasınlar" ve görünüm
   anasayfayla tutarlı kalsın).
   NOT: Profil rozeti seçicisi kasıtlı olarak ".avatar-md" ile sınırlı —
   profil menüsü AÇILINCA görünen küçük avatar rozeti (dropdown-menu içindeki
   ".avatar.me-3", "avatar-md" TAŞIMIYOR) her zaman beyaz zeminli kart
   içinde kaldığı için header'ın sticky durumundan etkilenmemeli. */
header.header-sticky-on .nav-notification.btn-white,
header.header-sticky-on #hamburgerTrigger.bg-white,
header.header-sticky-on .avatar-md .avatar-img.bg-white {
    background-color: var(--tch-primary) !important;
    color: #fff !important;
}
header.header-sticky-on .avatar-md .avatar-img.bg-white .icon-md {
    background-color: #fff !important;
    color: var(--tch-primary) !important;
}
header.header-sticky-on .avatar-md .avatar-img.bg-white .fs-6,
header.header-sticky-on .avatar-md .avatar-img.bg-white p {
    color: #fff !important;
}

/* --- İç sayfa header logosu: "dururken" (normal) / "yapışkan" (sticky)
   anahtarı ---
   Her görsel KENDİNE ÖZEL bir sınıf kullanıyor (a/b/c/d birbirine karışmaz),
   bu yüzden aşağıdaki 4 "göster" kuralından hiçbiri bir diğeriyle çakışmaz;
   her biri sadece kendi görselini etkiler. Önce hepsi varsayılan olarak
   gizli, sonra tam olarak DOĞRU tek görsel (geçerli tema + geçerli
   sticky durumu) gösterilir. */
.tch-innerlogo-normal-light,
.tch-innerlogo-normal-dark,
.tch-innerlogo-sticky-light,
.tch-innerlogo-sticky-dark {
    display: none !important;
}
[data-bs-theme=light] header:not(.header-sticky-on) .tch-innerlogo-normal-light {
    display: inline-block !important;
}
[data-bs-theme=dark] header:not(.header-sticky-on) .tch-innerlogo-normal-dark {
    display: inline-block !important;
}
[data-bs-theme=light] header.header-sticky-on .tch-innerlogo-sticky-light {
    display: inline-block !important;
}
[data-bs-theme=dark] header.header-sticky-on .tch-innerlogo-sticky-dark {
    display: inline-block !important;
}

header.header-sticky-on .nav-pills-white-soft .nav-link {
    color: var(--bs-gray-800) !important;
}
header.header-sticky-on .nav-pills-white-soft .nav-link.active,
header.header-sticky-on .nav-pills-white-soft .nav-link:hover {
    color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.arac-aciklama, .arac-aciklama *,
.tch-ist-aciklama, .tch-ist-aciklama * {
    font-weight: 500 !important;
}

@media (max-width: 991.98px) {
    .degerlendirme-item .hstack.justify-content-between {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .degerlendirme-item .hstack.justify-content-between > .text-end {
        text-align: left !important;
    }
}

.back-top {
    z-index: 999999999999 !important;
}

.tch-yol-link {
    display: inline-block;
    padding: .15rem .5rem;
    margin: -.15rem -.5rem;
    border-radius: .375rem;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease-in-out;
}

.tch-yol-link:hover,
.tch-yol-link:focus {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    text-decoration: none;
}

/* ".custom-breadcrumb" (hizmetler.php / paketler.php PHP breadcrumb üreticisinin
   kullandığı <ol class="custom-breadcrumb"> yapısı) — bu kural daha önce SADECE
   o iki sayfanın kendi inline <style> bloğunda tanımlıydı, sitewide custom.css'te
   hiç yoktu. Aynı markalı üreticiyi kullanan YENİ bir sayfa (örn. platforma özel
   ücretsiz-araçlar sayfası) bu inline stili kopyalamadığı için breadcrumb
   tamamen stilsiz/düz metin gibi görünüyordu. Artık burada, sitewide, tek yerden
   tanımlı — bu yapıyı kullanan HER sayfa otomatik olarak doğru görünür. */
.custom-breadcrumb {
    padding: 0;
    margin: 0;
    background: transparent;
    list-style: none;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: .25rem;
}

.custom-breadcrumb .breadcrumb-item {
    color: #eee;
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: " > ";
    margin: 0 6px;
    color: #ccc;
}

/* Nefes alan (sıkışık olmayan) ve hover efektli linkler — .tch-yol-link ile aynı hover
   mantığı (bkz. yukarıdaki .tch-yol-link kuralı). Arkaplan zaten renkli/koyu bant
   (bg-primary-lines) olduğundan gece/gündüz temasından bağımsız her zaman okunaklı. */
.custom-breadcrumb .breadcrumb-item a {
    display: inline-block;
    padding: .15rem .4rem;
    margin: -.15rem -.4rem;
    border-radius: .375rem;
    color: #eee;
    text-decoration: none;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.custom-breadcrumb .breadcrumb-item a:hover,
.custom-breadcrumb .breadcrumb-item a:focus {
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 992px) {
    .breadcrumb.bg-primary-lines .hstack.flex-column.flex-lg-row,
    .breadcrumb.bg-primary-lines .hstack.gap-3.flex-lg-row.flex-column {
        justify-content: center !important;
    }

    .custom-breadcrumb {
        justify-content: center;
    }

    .breadcrumb .text-lg-start.text-center {
        text-align: center !important;
    }

    .breadcrumb .hstack.gap-3.flex-lg-row.flex-column {
        align-items: center;
    }
}

/* NOT: /ucretsiz-araclar/ sayfasında mobilde "yukarı çık" (.back-top) butonu çok
sağda kalıyordu. Kök sebep: breadcrumb/hero bölümündeki eski istatistik satırı
"text-nowrap" olduğu için dar ekranlarda kutunun genişliği taşıyor, bu da sayfayı
yatay olarak kaydırılabilir hale getiriyor (.back-top fixed olduğu için görsel
olarak viewport'un sağına göre değil, taşan içeriğe göre "kaymış" görünüyordu).
İstatistik kartı artık text-nowrap kullanmıyor (bkz. ucretsiz-araclar.php), ama
ilerde benzer bir taşma olmasın diye hero bölümü de önlem olarak kırpılıyor. */
.breadcrumb.bg-primary-lines {
    overflow-x: hidden;
}