:root {
  --tema-rengi: #0066ff; /* fallback renk */
}
body { 

  margin: 0 !important;
  padding: 0 !important;
}

.tam-genislik-tablo {
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;

  background: #f3faf7 !important; /* çok silik yeşil */
  box-shadow: 0 0 0 9999px #071827; /* sağ-sol lacivert */
}

.tam-genislik-tablo {
        min-height: 100vh; /* Ekran yüksekliği kadar alan kaplasın */
        width: 100%;
    }
.InputAlanlariKK{
	width: 90%;
	height:30px;
	padding:0px 10px;	
}
.InputAlanlariGKA{
	width: 90%;
	height:30px;
	padding:3px 10px;	
}
.InputAlanlariDA{
	width: 500px;
	height:120px;
	padding:0px 10px;	
}
.InputAlanlariteklif{
	width: 270px;
	height:20px;
	padding:0px 5px;
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, "sans-serif";
font-size: 12px;
color: #646464;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;	
}
.InputAlanlariteklifek{
	width: 20px;
	height:20px;
	padding:0px 5px;
 font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: #646464;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;	
}
.InputAlanlariteklifk{
	width: 130px;
	height:20px;
	padding:0px 5px;
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: #646464;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;	
}
#teklifkalemTable {
    border-collapse: collapse;
    width: 90%;
	
}
#teklifkalemTable th, #teklifkalemTable td {
    padding: 8px;
    border: 1px solid #ddd;
	
}
#teklifkalemTable th {
    background-color: #f4f4f4;
}
/* Bu sayfaya özel tablolar */
.container table {  
    margin: 10px 0;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}
/* Tablo Başlıkları */
.container table thead tr {
    background-color: #ff4500;
    color: white;
	
}

.container table thead th {
    padding: 8px;
    text-align: left;
    font-size: 12px;
	
}

/* Tablo Hücreleri */
.container table tbody td {   
    border-bottom: 1px solid #ddd;
    font-size: 12px;	
	 vertical-align: middle; /* Tüm hücreleri ortalar */
    padding: 5px; /* Hücre içi boşluk */
}

/* Alternatif Renkli Satırlar */
.container table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Giriş Alanları */
 
.container .InputAlanlariteklif {
    width: calc(90% - 10px);
	height:30px;
    padding: 5px;
	vertical-align: middle; /* Tüm hücreleri ortalar */   
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	text-align:center;

}
.container .InputAlanlariteklifk {
    width: calc(90% - 10px);
	height:30px;
    padding: 5px;
	vertical-align: middle; /* Tüm hücreleri ortalar */   
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	text-align:center;

}
.container .InputAlanlariteklife {
    width: calc(90% - 10px);
	height:30px;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	text-align:center;
	vertical-align: middle;
}
.container .InputAlanlariteklifek {
    width: 20px;
	height:30px;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	text-align:center;
	vertical-align: middle;
}
.container .InputAlanlariteklifksec {
    width: 120px;
	height:30px;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	text-align:center;
	vertical-align: middle;
}
.container .InputAlanlariteklifehk {
    width: 50px;
	height:30px;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	text-align:center;
	vertical-align: middle;
}
/* Firma ve Cihaz Sonuçları */
#firmaSonuc,
#cihazSonuc {
    display: none; /* Varsayılan olarak gizli */
    position: absolute; /* Konumlandırma */
    max-height: 150px; /* Maksimum yükseklik */
    overflow-y: auto; /* Kaydırma çubuğu */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    background-color: #fff;
    font-size: 12px;
    z-index: 1000;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Hover Efekti */
.container #firmaSonuc div, 
.container #cihazSonuc div {
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.container #firmaSonuc div:hover, 
.container #cihazSonuc div:hover {
    background-color: #e0e0e0;
}

/* Başlık İçin Özel Stil */
.container .titletek {
    display: flex;
    align-items: center;
    
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.container .titletek input {
    flex-grow: 1;
}




.KargoTakipButonu{	
	height:30px;
	border: 1px solid #CCCCCC;
	background:#ff9900;
	padding: 5px 50px;
	color: white;
}
.KargoTakipButonu:hover{	
	height:30px;
	border: 1px solid #000000;
	background:#0088cc;
	padding: 5px 50px;
	color: black;
	cursor: pointer;
}
.SonucSayfalari a:link, .SonucSayfalari a:visited, .SonucSayfalari a:active{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 14px;
color: #0088cc;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
}
.SonucSayfalari a:hover{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 14px;
color: #FFF000;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
}
.MenuSayfalarim a:link, .MenuSayfalarim a:visited, .MenuSayfalarim a:active{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
}
.MenuSayfalarim a:hover{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: #FFF000;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
}

.TextAreaAlanlari{
	width: 500px;
	height:300px;
	padding:10px 10px;
	resize: none;	
}
.TextAreaAlanlariSoruSor{
	width: 300px;
	height:50px;
	padding:5px 5px;
	resize: none;	
}
.YorumTextAreaAlanlari{
	width: 320px;
	height:100px;
	padding:10px 10px;
	resize: none;
}
.YorumTextAreaAlanlariA{
	width:95%;
	height:200px;
	padding:10px 10px;
	resize: none;
}
.YesilButon{
	height: 30px;
	border: 1px;
	background:#ff7e2e;
	padding: 5px 30px;
	color: white;	
}
.YesilButon:hover{
	height: 30px;
	border: 1px;
	background:#ff9900;
	padding: 5px 30px;
	color: white;
    cursor:pointer;	
}
.SonucSayfalariB a:link, .SonucSayfalariB a:visited, .SonucSayfalariB a:active{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 14px;
color: #0088cc;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:bold;
text-decoration:none;
}
.SonucSayfalariB a:hover{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 14px;
color: #0088cc;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
}
.SayfalamaAlaniKapsayicisi{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	text-align: center;
	text-decoration: none;	
}
.SayfalamaAlaniIcMetinAlaniKapsayicisi{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	text-align: center;
	text-decoration: none;		
}
.SayfalamaAlaniIcNumaraAlaniKapsayicisi{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	text-align: center;
	text-decoration: none;		
}
.SayfalamaAktif{
	display: inline-block;
	width: auto;
	height: 20px;
	margin: 0px 0.5px;
	padding: 5px 7.5px;
	background:#F6F6F6;
	border: 1px solid #DADADA;
	outline: 0;
	color: #FF0000;
	font-weight: bold;
    text-decoration:none;	
}
.SayfalamaPasif{
	display: inline-block;
	width: auto;
	height: 20px;
	margin: 0px 0.5px;
	padding: 5px 7.5px;
	background:#F6F6F6;
	border: 1px solid #DADADA;
	outline: 0;
	color: #646464;
	font-weight: bold;
    text-decoration:none;
}
.SayfalamaPasif a:link, .SayfalamaPasif a:hover, .SayfalamaPasif a:active, .SayfalamaPasif a:visited{
	color:#646464;
	text-decoration:none;	
}
.AramaAlani{
	display:block;
	width:100%;
	height:35px;
	margin:0;
	padding:0;
	overflow:hidden;
	border:0;
	outline:0;
	vertical-align:top;	
}
.AramaAlaniButonKapsamaAlani{
	display:inline-block;
	float:right;
	width:60;
	height:35px;
	margin:0;
	padding:0;
	overflow:hidden;
	border:0;
	outline:0;
	text-align:left;
}	
.AramaAlaniInputKapsamaAlani {
	display: inline-block;
	float: right;
	width: calc(100% - 60px); 
	height: 35px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	outline: 0;
	text-align: left;
}
.AramaAlaniInputu {
	display: block;
	float: right;
	width: calc(100% - 42px); 
	height: 33px;
	margin: 0;
	padding: 0;
	padding-left: 30px;
	padding-right: 10px;
	background: url(../Resimler/gcc/buyutecrenk.png) no-repeat center left 10px;
	border: 1px solid #646464;
	outline: none;
	text-align: left;
}
.AramaAlaniButonu {
	display: block;
	width: 60px;
	height: 35px;
	margin: 0;
	padding: 0;
	border: 1px solid #646464;
	background: url(../Resimler/gcc/soru16x19.png) no-repeat center left 10px;
	background-size: 30px; 
	outline: none; 
}
.AramaAlaniButonu:hover{
	cursor:pointer;
}
.InputAlanlariug{
	width: 90%;
	height:30px;
	padding:3px 10px;	
}
.InputAlanlariugi{
	width: 50%;
	height:30px;
	padding:3px 10px;	
}
.InputAlanlariugii{
	width: 30%;
	height:30px;
	padding:3px 10px;	
}
.TextAreaAlanlariug{
	width: 90%;
	height:150px;
	padding:10px 10px;
	resize: none;	
}   
 .red-text {
 color: red;
}
.green-text {
 color: green;
}
.SonucSayfalarisy a:link, .SonucSayfalarisy a:visited, .SonucSayfalarisy a:active{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: black;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:bold;
text-decoration:none;
white-space: nowrap; /* Alt satıra geçmeyi engeller */
overflow: hidden; /* Taşan kısmı gizler */
text-overflow: ellipsis; /* Taşan kısmı "..." ile gösterir */
max-width: 450px; /* Hücre genişliğini sınırlar */
display: inline-block; /* Metin hizalamasını sağlar */
vertical-align: middle;
}
.SonucSayfalarisy a:hover{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: black;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:bold;
text-decoration:none;
white-space: nowrap; /* Alt satıra geçmeyi engeller */
overflow: hidden; /* Taşan kısmı gizler */
text-overflow: ellipsis; /* Taşan kısmı "..." ile gösterir */
max-width: 450px; /* Hücre genişliğini sınırlar */
display: inline-block; /* Metin hizalamasını sağlar */
vertical-align: middle;
}
.SonucSayfalarisyrenk a:link, .SonucSayfalarisyrenk a:visited, .SonucSayfalarisyrenk a:active{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: red;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:bold;
text-decoration:none;
}
.SonucSayfalarisyrenk a:hover{
font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
font-size: 12px;
color: #ff9900;
line-height: 1.5;
font-style:normal;
font-variant:normal;
font-weight:bold;
text-decoration:none;
}
.yesil-buton {
    width: 200px;
    height: 40px;
    background-color: #ff4500; /* Koyu Yeşil */
    color: white; /* Yazı rengi */
    border: none; /* Kenarlık yok */
    border-radius: 5px; /* Hafif yuvarlatılmış köşeler */
    font-size: 14px; /* Yazı boyutu */
    cursor: pointer; /* Üzerine gelindiğinde el simgesi */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Varsayılan gölge */
    transition: all 0.3s ease; /* Animasyon geçişi */
}

.yesil-buton:hover {
    background-color: #008000; /* Daha açık yeşil ton */
}

.yesil-buton:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); /* Tıklama efekti gölgesi */
    transform: scale(0.98); /* Hafif küçülme efekti */
}
.yesil-butong {
    width: 200px;
    height: 40px;
    background-color: #008000; /* Koyu Yeşil */
    color: white; /* Yazı rengi */
    border: none; /* Kenarlık yok */
    border-radius: 5px; /* Hafif yuvarlatılmış köşeler */
    font-size: 14px; /* Yazı boyutu */
    cursor: pointer; /* Üzerine gelindiğinde el simgesi */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Varsayılan gölge */
    transition: all 0.3s ease; /* Animasyon geçişi */
}

.yesil-butong:hover {
    background-color: #ff4500; /* Daha açık yeşil ton */
}

.yesil-butong:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); /* Tıklama efekti gölgesi */
    transform: scale(0.98); /* Hafif küçülme efekti */
}
.gri-buton {
    display: inline-block;
    width: 200px;
    height: 25px;
    background-color: rgba(173, 216, 230, 0.5); /* Sütlü donuk mavi */ /* Koyu gri  ;*/
    color: black;
    text-align: center;
    line-height: 20px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Fare üzerine geldiğinde efekt */
.gri-buton:hover {
    transform: scale(1.1) translateY(-3px); /* Hafif büyüt ve yukarı kaldır */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge ekle */
    color: #ffcc00; /* Yazıyı sarı renge değiştir */
}
.gri-buton:focus {
    outline: none; /* Focus kenarlığı kaldırmak için */
}

.gri-buton:active {
    background-color: #00c8ff; /* Tıklama sonrası aktif durumu */
    color: white;
    border: 1px solid #00c8ff;
}
.baslik-bolumu {
    background-color: #4a4a4a; /* Koyu gri arka plan */
    color: #ffffff; /* Beyaz yazı */
    padding: 10px; /* İçerik boşluğu */
    border-radius: 5px; /* Yuvarlatılmış köşeler */
    text-align: left; /* Yazıyı sola hizala */
   font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif; /* Yazı fontu */
    font-size: 18px; /* Yazı boyutu */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Hafif gölge efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover efekti */
.baslik-bolumu:hover {
    transform: scale(1.03); /* Hafif büyüme efekti */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Daha belirgin gölge */
}
.baslik-bolumuince {
    background-color: #4a4a4a; /* Koyu gri arka plan */
    color: #ffffff; /* Beyaz yazı */
    padding: 2px; /* İçerik boşluğu */
    border-radius: 5px; /* Yuvarlatılmış köşeler */
    text-align: left; /* Yazıyı sola hizala */
    font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif; /* Yazı fontu */
    font-size: 12px; /* Yazı boyutu */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Hafif gölge efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.baslik-bolumuince:hover {
    transform: scale(1.03); /* Hafif büyüme efekti */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Daha belirgin gölge */
}
.baslik-bolumusabit {
    background-color: #ff4500; /* Koyu gri arka plan  #4a4a4a*/
	display: flex; /* İçeriği yatayda hizalar */
    justify-content: space-between;
    color: #ffffff; /* Beyaz yazı */
    padding: 10px; /* İçerik boşluğu */
    border-radius: 5px; /* Yuvarlatılmış köşeler */
    text-align: left; /* Yazıyı sola hizala */
    font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif; /* Yazı fontu */
    font-size: 18px; /* Yazı boyutu */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Hafif gölge efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	
}
.baslik-bolumuincesabit {
    background-color: #4a4a4a; /* Koyu gri arka plan */
    color: #ffffff; /* Beyaz yazı */
    padding: 5px; /* İçerik boşluğu */
    border-radius: 5px; /* Yuvarlatılmış köşeler */
    text-align: left; /* Yazıyı sola hizala */
    font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;/* Yazı fontu */
    font-size: 14px; /* Yazı boyutu */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Hafif gölge efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.baslik-bolumuincesabitsari {
    background-color: #FFD700; /* Koyu gri arka plan */
    color: #ffffff; /* Beyaz yazı */
    padding: 5px; /* İçerik boşluğu */
    border-radius: 5px; /* Yuvarlatılmış köşeler */
    text-align: left; /* Yazıyı sola hizala */
    font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;/* Yazı fontu */
    font-size: 14px; /* Yazı boyutu */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Hafif gölge efekti */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.veri-kutusu {
    font-size: 14px;
    border: 1px solid #CCCCCC;
    border-radius: 15px;
    background-color: #f8f9fa; /* Açık gri arka plan */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
    padding: 10px;
    margin: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover efektleri */
}

/* Hover efekti */
.veri-kutusu:hover {
    transform: scale(1.05); /* Hafif büyüme efekti */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
}

/* Başlık tasarımı */
.veri-baslik {
    font-size: 16px;
    color: #4a4a4a; /* Koyu gri renk */
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCCCCC; /* İnce alt çizgi */
}

/* Sayı tasarımı */
.veri-sayi {
    font-size: 24px;
    color: #007bff; /* Mavi renk */
    font-weight: bold;
    margin-top: 10px;
}
.baslik-bolumusabit1 {
    display: flex; /* İçeriği yatayda hizalar */
    justify-content: space-between; /* Metin sola, resim sağa gider */
    align-items: center; /* Dikeyde ortalar */
    background-color: #81c4e3; /* Mavi zemin */
    color: #FFFFFF;
    padding: 10px;
    font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif;
}

/* Yuvarlak resim çerçevesi */
.yuvarlak-resim {
    width: 60px; /* Resmin genişliği */
    height: 60px; /* Resmin yüksekliği */
    border-radius: 50%; /* Daire oluşturur */
    overflow: hidden; /* Taşan kısımları gizler */
    border: 2px solid #FFFFFF; /* Beyaz çerçeve */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gölge efekti */
}

/* Resmin kendisi */
.yuvarlak-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi daireye sığdırır */
}
/* Kalp ve gül efektleri */
        .heart, .rose {
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s ease, transform 1s ease;
            pointer-events: none;
            z-index: 1;
        }
        
        .heart {
            color: #ff3366;
            font-size: 18px;
            text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
        }
        
        .rose {
            color: #ff3366;
            font-size: 20px;
        }
        
        /* Hover olduğunda kalp ve gülleri göster */
        .logo:hover .heart, .logo:hover .rose {
            opacity: 1;
        }
        
        /* Kalp ve gül konumlandırmaları - YUKARI KAYDIRILDI */
        .heart:nth-child(1) { top: 20px; left: 30px; }
        .heart:nth-child(2) { top: -10px; right: 30px; }
        .heart:nth-child(3) { top: -20px; left: 15px; }
        .heart:nth-child(4) { top: -30px; right: 15px; }  
       
        
        /* Hover sırasında hareket efekti */
        .logo:hover .heart:nth-child(1) {
            animation: float 3s ease-in-out infinite;
        }
        
        .logo:hover .heart:nth-child(2) {
            animation: float 3s ease-in-out infinite 0.5s;
        }
        
        .logo:hover .heart:nth-child(3) {
            animation: float 3s ease-in-out infinite 1s;
        }
        
        .logo:hover .heart:nth-child(4) {
            animation: float 3s ease-in-out infinite 1.5s;
        }
        
        .logo:hover .rose:nth-child(5) {
            animation: swing 3s ease-in-out infinite;
        }
        
        .logo:hover .rose:nth-child(6) {
            animation: swing 3s ease-in-out infinite 0.5s;
        }
        
        /* Animasyonlar */
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
            33% { transform: translateY(-8px) rotate(5deg) scale(1.2); }
            66% { transform: translateY(-4px) rotate(-5deg) scale(1.1); }
        }
        
        @keyframes swing {
            0%, 100% { transform: translateY(-50%) rotate(-10deg); }
            50% { transform: translateY(-50%) rotate(10deg); }
        }
        
        .explanation {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            color: white;
            text-align: left;
        }
        
        .explanation h2 {
            margin-bottom: 15px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 10px;
        }
        
        .code-example {
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 10px;
            margin-top: 15px;
            overflow-x: auto;
            font-family: monospace;
            font-size: 14px;
        }
/* Ana bağlantı stilleri */
.geri-don a {
    color: #000; /* Normal yazı rengi */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-size: 20px;
    transition: all 0.3s ease; /* Geçiş efektleri için */
}

/* Hover efekti */
.geri-don a:hover {
    color: #007bff; /* Yazı rengini değiştir */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Gölge efekti */
    transform: scale(1.05); /* Yazıyı hafifçe büyüt */
    text-decoration: none; /* Alt çizgi ekle */
}
/* Ana bağlantı stilleri */
.geri-don a {
    display: flex; /* Yazı ve okun yan yana görünmesi için */
    align-items: center;
    gap: 10px; /* Yazı ile ok arasında boşluk */
    color: #000; /* Yazı ve ok rengi */
    text-decoration: none; /* Alt çizgiyi kaldır */
    font-size: 20px; /* Yazı boyutu */
    font-weight: bold; /* Yazıyı kalın yap */
    transition: all 0.3s ease; /* Geçiş efektleri için */
}

/* Ok stilizasyonu */
.geri-don-ok {
    display: inline-block;
    font-size: 22px; /* Ok boyutu */
    transition: transform 0.3s ease; /* Hareket için geçiş efekti */
}

/* Hover efekti */
.geri-don a:hover {
    color: #007bff; /* Yazının hover rengini değiştir */
}

.geri-don a:hover .geri-don-ok {
    transform: translateX(-5px); /* Ok sola hareket eder */
    color: #007bff; /* Ok hover rengini değiştir */
}
.firma-sinirla {
    max-width: 450px; /* Maksimum genişlik */
    overflow: hidden; /* Taşan kısmı gizle */
    text-overflow: ellipsis; /* Üç nokta ekle */
    white-space: nowrap; /* Satır sonunu engelle */
}
.InputAlanlarisorgular {
    width: 90%;
    padding: 3px;
    text-decoration: none;
    height: auto;
    border: 1px solid #81C784;          /* 🌿 soğuk yeşil */
    font-size: 14px;

    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;

    background-color: #E8F5E9;          /* 🌿 açık ferah yeşil */

    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.InputAlanlarisorgular:focus {
    outline: none;
    border-color: #66BB6A;               /* 🌿 focus yeşili */
    box-shadow: 0 0 6px rgba(102, 187, 106, 0.45);
}

.InputAlanlarisorgularuzun {
    width: 95%;
    padding: 10px;
    text-decoration: none;
    height: auto;
    border: 1px solid #ccc;
    font-size: 16px;

    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;

    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    background-color: #F1F3F4; /* 🔹 bir tık daha koyu */
}

.InputAlanlarisorgularkisa {
	width: 50%;
	padding: 5px;
	text-decoration: none;
	height: auto;
	border: 1px solid #ccc;
	font-size: 14px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
	background-color: #ff4500;
	color: white;

	/* Eklentiler */
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.InputAlanlarisorgularust {
	width: 100%;
	padding: 20px;
	text-decoration: none;
	height: auto;
	border: 0px;
	font-size: 16px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
	font-weight: bold;

	/* Eklentiler */
	border-radius: 12px;
	background-color: #f3f3f3;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.InputAlanlarisorgularuzun:focus,
.InputAlanlarisorgularkisa:focus {
	outline: none;
	border-color: #ff7f50;
	box-shadow: 0 0 5px rgba(255, 127, 80, 0.5);
}

.InputAlanlarisorgularkisa {
	width: 50%;
	padding: 5px;
	text-decoration: none;
	height: auto;
	border: 1px solid #ccc;
	font-size: 14px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
	background-color: #ff4500;
	color: white;

	/* Eklentiler */
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}
.labelalantutuncu{	
    text-decoration: none; /* Alt çizgiyi kaldır */  
    font-size: 14px; /* Yazı boyutu */ 	
	color:#ff4500;
	 font-weight: bold;
}
.labelalanmavi{	
    text-decoration: none; /* Alt çizgiyi kaldır */  
    font-size: 14px; /* Yazı boyutu */ 	
	color:#81c4e3;
	 font-weight: bold;
}
#nsonuclar {
   width: 90%;	
	padding:3px 3px;
    text-decoration: none; /* Alt çizgiyi kaldır */
    height: 15; /* Yükseklik içerikle büyüyebilir */
    border: 1px solid #ccc; /* Kenarlık */
    padding: 3px; /* İç boşluk */
    font-size: 14px; /* Yazı boyutu */
    overflow-wrap: break-word; /* Kelimeleri bölerek alt satıra geçir */
    word-wrap: break-word; /* Eski tarayıcı desteği için */
    white-space: normal; /* Normal boşluk davranışı */
	background-color: #81c4e3;
	color: black;
}
#yetsonuclar {
   width: 90%;	
	padding:3px 3px;
    text-decoration: none; /* Alt çizgiyi kaldır */
    height: 15; /* Yükseklik içerikle büyüyebilir */
    border: 1px solid #ccc; /* Kenarlık */
    padding: 3px; /* İç boşluk */
    font-size: 14px; /* Yazı boyutu */
    overflow-wrap: break-word; /* Kelimeleri bölerek alt satıra geçir */
    word-wrap: break-word; /* Eski tarayıcı desteği için */
    white-space: normal; /* Normal boşluk davranışı */
	background-color: #81c4e3;
	color: black;
}
.gri-butonk {
    display: inline-block;
    width: 150px;
    height: 40px;
    background-color: #B71C1C; /* Koyu gri  ;*/
    color: white;
    text-align: center;
    line-height: 30px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;	
}

/* Fare üzerine geldiğinde efekt */
.gri-butonk:hover {
    transform: scale(1.1) translateY(-3px); /* Hafif büyüt ve yukarı kaldır */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge ekle */
    color: black; /* Yazıyı sarı renge değiştir */
}
#cihazTablosu {
    max-width: 860px;
    border-collapse: collapse;
    width: 100%; /* Tablonun genişliğini tam olarak kaplamasını sağlar */
}

#cihazTablosu th, #cihazTablosu td {
    border: 1px solid #ddd;
    padding: 8px; /* Daha fazla boşluk */
    text-align: left;
    font-size: 12px;
}

#cihazTablosu th {
    background-color: #f2f2f2;
    font-size: 12px;
}

#cihazTablosu tr:nth-child(even) {
    background-color: #f9f9f9;
}

#cihazTablosu tr:hover {
    background-color: #d0d0d0; /* Daha koyu hover rengi */
    transition: background-color 0.3s ease; /* Geçiş efekti */
}

/* 12'den 17'ye kadar olan sütunlar gizlenmiştir */
th:nth-child(n+13):nth-child(-n+18),
td:nth-child(n+13):nth-child(-n+18) {
    display: none;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    #cihazTablosu {
        overflow-x: auto; /* Yatay kaydırma çubuğu ekler */
        display: block;
    }
}
.sonuc-listesi {
    border: 1px solid #ddd;
    max-height: 150px;
    overflow-y: auto;
    padding: 5px;
    background-color: #fff;
    position: absolute;
    z-index: 10;
    width: 300px;
}
.sonuc-listesi .liste-ogr {
    padding: 5px;
    cursor: pointer;
}
.sonuc-listesi .liste-ogr:hover {
    background-color: #f0f0f0;
}
#cihazGorTablosu {
   max-width: 860px;
    border-collapse: collapse; 
}

#cihazGorTablosu th, #cihazGorTablosu td {
    border: 1px solid #ddd; 
    padding: 1px;
    text-align: left;
	font-size: 12px;
}

#cihazGorTablosu th {
    background-color: #f2f2f2; 
	font-size: 12px;
}

#cihazGorTablosu tr:nth-child(even) {
    background-color: #f9f9f9; 
	font-size: 12px;
}

#cihazGorTablosu tr:hover {
    background-color: #e0e0e0; 
	font-size: 12px;
}

  /* Tabloyu merkezlemek */
    #PersonelinTablosu {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }

    /* Tablo başlıkları için stil */
    #PersonelinTablosu th {
        background-color: #f2f2f2; /* Gri arka plan */
        text-align: center;         /* Başlıkları ortalamak */
        padding: 10px;
        font-weight: bold;
		font-size: 12px;
        border: 1px solid #ddd;    /* Hücre sınırları */
    }

    /* Tablo hücreleri için stil */
    #PersonelinTablosu td {
        text-align: center;        /* Veriyi ortalamak */
        padding: 10px;
        border: 1px solid #ddd;    /* Hücre sınırları */
		font-size: 12px;
    }

    /* Alternatif satır renkleri */
    #PersonelinTablosu tr:nth-child(even) {
        background-color: #f9f9f9; /* Her iki satırın arasında farklı renk */
    }

    #PersonelinTablosu tr:hover {
        background-color: #f1f1f1; /* Üzerine gelince renk değişimi */
    }

    /* Tabloyu kapsayan genel stil */
    table {
		width: 100%;		 
        border-radius: 3px; /* Köşe yuvarlama */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Gölgeleme efekti */		
	    padding:0px 3px;
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, "sans-serif";
    font-size: 12px;
    color: #646464;
    line-height: 1.5;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none;
    }
	
.InputAlanlarikucuk{
	width: 200px;	
	padding:3px 3px;
    text-decoration: none; /* Alt çizgiyi kaldır */
    height: 20; /* Yükseklik içerikle büyüyebilir */
    border: 1px solid #ccc; /* Kenarlık */
    padding: 3px; /* İç boşluk */
    font-size: 14px; /* Yazı boyutu */
    overflow-wrap: break-word; /* Kelimeleri bölerek alt satıra geçir */
    word-wrap: break-word; /* Eski tarayıcı desteği için */
    white-space: normal; /* Normal boşluk davranışı */
	background-color: #81c4e3;
}	
.labelalantutuncu200{
    width: 200px;	
	padding:3px 3px;
	text-decoration: none; /* Alt çizgiyi kaldır */
    height: 20; /* Yükseklik içerikle büyüyebilir */
    border: 1px solid #ccc; /* Kenarlık */
    padding: 3px; /* İç boşluk */
    font-size: 12px; /* Yazı boyutu */
    overflow-wrap: break-word; /* Kelimeleri bölerek alt satıra geçir */
    word-wrap: break-word; /* Eski tarayıcı desteği için */
    white-space: normal; /* Normal boşluk davranışı */
	color:#ff4500;
	 font-weight: bold;
}
.gri-butonl {
    display: inline-block;
    width: 100px;
    height: 20px;
    background-color: #4a4a4a; /* Koyu gri  ;*/
    color: white;
    text-align: center;
    line-height: 15px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
 
}
.gri-buton2 {
    display: inline-block;
    width: 200px;
    height: 20px;
    background-color: #4a4a4a; /* Koyu gri  ;*/
    color: white;
    text-align: center;
    line-height: 15px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
 
}

.modal-content {
    background: white;
	color: blue;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}
#firmaDetaylari {
    display: table;
    width: 100%;
}

#firmaDetaylari div {
    display: table-row;
}

#firmaDetaylari label {
    display: table-cell;
    padding-right: 10px; /* Label ile input arasındaki boşluk */
    text-align: right; /* Label'ları sağa hizalar */
}

#firmaDetaylari input {
    display: table-cell;
    width: 100%;
}
.cihaz-arama-sonuc {
    margin-top: 10px;
    color: green;
}

.cihaz-guncelle-input {
    width: 100%;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.aracubuk{
	
	width: 100%;
	height: 30px;
	border: 1px;
	background:#4a4a4a;
	padding: 5px 30px;
	color: white;	
}
.aracubuk:hover{
	width: 100%;
	height: 30px;
	border: 1px;
	background:#4a4a4a;
	padding: 5px 30px;
	color: white;
    cursor:pointer;	
}
.personel{ 
    width: 100%;      
    text-align: left;
    line-height: 10px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
 
}
.bgri-buton {
    display: inline-block;
    width: 200px;
    height: 50px;
    background-color: #4a4a4a; /* Koyu gri  ;*/
    color: white;
    text-align: center;
    line-height: 20px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Fare üzerine geldiğinde efekt */
.bgri-buton:hover {
    transform: scale(1.1) translateY(-3px); /* Hafif büyüt ve yukarı kaldır */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge ekle */
    color: #ffcc00; /* Yazıyı sarı renge değiştir */
}
.bgri-buton:focus {
    outline: none; /* Focus kenarlığı kaldırmak için */
}

.bgri-buton:active {
    background-color: #00c8ff; /* Tıklama sonrası aktif durumu */
    color: white;
    border: 1px solid #00c8ff;
}
.cgri-buton {
    display: inline-block;
    width: 200px;
    height: 35px;
    background-color: #4a4a4a; /* Koyu gri  ;*/
    color: white;
    text-align: center;
    line-height: 20px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Fare üzerine geldiğinde efekt */
.cgri-buton:hover {
    transform: scale(1.1) translateY(-3px); /* Hafif büyüt ve yukarı kaldır */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge ekle */
    color: #ffcc00; /* Yazıyı sarı renge değiştir */
}
.cgri-buton:focus {
    outline: none; /* Focus kenarlığı kaldırmak için */
}

.cgri-buton:active {
    background-color: #00c8ff; /* Tıklama sonrası aktif durumu */
    color: white;
    border: 1px solid #00c8ff;
}
        .container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }

        .header img {
            height: 50px;
        }

        .header .details {
            text-align: right;
        }

        .title {
            text-align: center;
            font-size: 24px;
            margin: 20px 0;
        }

        .customer-info, .notes {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
        }

        .customer-info td, .notes td {
            border: 1px solid #ccc;
            padding: 8px;
        }
    

        .footer {
            margin-top: 20px;
            font-size: 12px;
        }

        .footer p {
            margin: 5px 0;
        }
.redrakam{
font-size: 26px;
color:red;
}	
.kalplan-table {
	
    width: 100%;
    border-collapse: collapse;
    font-size: 12px; /* Tablo yazı boyutunu küçültür */
}

.kalplan-table .action-buttons {
    display: flex;
    gap: 5px;
}

.kalplan-table .action-buttons button {
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f9f9f9; /* Hafif bir arka plan rengi */
    border: 1px solid #ddd; /* Daha yumuşak kenarlar */
    border-radius: 8px; /* Köşeleri yuvarlama */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
    z-index: 1000;
    display: none; /* Varsayılan gizli */
    padding: 20px; /* İç boşluk */
    max-width: 500px; /* Genişlik sınırı */
    width: 90%; /* Mobil uyumlu */
    font-family: "Lato", "Segoe UI", Verdana, Arial, sans-serif; /* Modern yazı tipi */
	max-height: 80vh; /* Ekran yüksekliğinin %80’i */
    overflow-y: auto; /* İçerik taştığında kaydırma çıksın */
}

.modal h3 {
    margin-top: 0; /* Başlık üst boşluğunu kaldır */
    font-size: 1.5em; /* Daha büyük başlık */
    color: #333; /* Başlık rengi */
    border-bottom: 2px solid #007bff; /* Başlık altına vurgu çizgisi */
    padding-bottom: 10px; /* Başlık altı boşluk */
}

.modal .form-row {
    margin-bottom: 15px; /* Satırların arasına boşluk */
}

.modal .form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold; /* Etiketleri vurgula */
    color: #555;
}

.modal .form-row input,
.modal .form-row select,
.modal .form-row textarea {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px; /* Hafif yuvarlama */
    box-sizing: border-box; /* Kenar-paddingsiz genişlik */
}

.modal .form-row input:focus,
.modal .form-row select:focus,
.modal .form-row textarea:focus {
    border-color: #007bff; /* Odaklanma rengi */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.modal button {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff; /* Buton rengi */
    color: white;
    margin-right: 10px; /* Butonlar arası boşluk */
    transition: background-color 0.3s ease; /* Yumuşak geçiş */
}

.modal button:hover {
    background-color: #0056b3; /* Hover rengi */
}

.modal button[type="button"] {
    background-color: #6c757d; /* İptal buton rengi */
}

.modal button[type="button"]:hover {
    background-color: #5a6268; /* Hover rengi */
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s ease;
}
.modal-close:hover {
    color: #007bff;
}
.silButon {
    padding: 5px 10px;
    background-color: red;
    color: white;
    border: 1;
    border-radius: 3px;
    cursor: pointer;
}
.yazi-asagi {
    margin-top: 30px; /* İstediğiniz kadar aşağı çekebilirsiniz */
	 font-size: 18px;
	 font-weight: bold;
}
  @page {
            margin: 20mm;
            border: 1px solid black; /* Sayfa kenarları için çerçeve */
            border-collapse: collapse;
        }

.gri-butone {
    display: inline-block;
    width: 200px;
    height: 25px;
    background-color: #4a4a4a; /* Koyu gri  ;*/
    color: white;
    text-align: center;
    line-height: 20px; /* Dikey hizalama için */
    border-radius: 5px; /* Hafif yuvarlak köşeler */
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Fare üzerine geldiğinde efekt */
.gri-butone:hover {
    transform: scale(1.1) translateY(-3px); /* Hafif büyüt ve yukarı kaldır */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge ekle */
    color: black; /* Yazıyı sarı renge değiştir */
	background-color: yellow;
}		
/* Tablet ve mobil cihazlar için */
@media only screen and (max-width: 1065px) {
    table {
        width: 100% !important;
    }
    
    /* Diğer responsive stiller */
}

/* Küçük mobil cihazlar için */
@media only screen and (max-width: 480px) {
    /* Daha küçük ekranlar için özel stiller */
}
.firmaSecim {
    margin: 5px 0;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #f9f9f9;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    list-style-type: none;
}

.firmaSecim:hover {
    background-color: #ffe0e0; /* Hafif pembe hover efekti */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

header {
     background: var(--theme-bg);
  border: 14px solid rgba(0,0,0,0.35);
  border-left: 6px solid var(--theme-accent);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 18px 24px;
  color: var(--theme-text);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* İÇERİK ALANI (AÇIK YEŞİL CAM) */
header::before {
  background: var(--theme-bg);
  border: 14px solid rgba(0,0,0,0.35);
  border-left: 6px solid var(--theme-accent);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  border-radius: 15px;
  padding: 18px 24px;
  color: var(--theme-text);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* HEADER İÇERİĞİ ÜSTE ÇIKSIN */
.header-content {
    position: relative;
    z-index: 1;

    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

/* SOL METİN BLOĞU */
.header-content h3 {
    color: #d0fff3;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    opacity: 0.9;
}

.header-content h1 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 900;
    margin: 6px 0 8px 0;
    letter-spacing: 0.6px;
}

.header-content .description {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    font-weight: 600;
    max-width: 720px;
}

/* SAĞ LOGO ALANI */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yuvarlak-resim {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    overflow: hidden;

    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.25);

    box-shadow:
        0 10px 22px rgba(0,0,0,0.45),
        inset 0 0 0 2px rgba(255,255,255,0.05);
}

.yuvarlak-resim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive bozulmasın */
@media (max-width: 900px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }

    .header-content h1,
    .header-content h3,
    .header-content .description {
        text-align: center;
    }
}
.yakartabbas-button{
  background: var(--btn-bg, var(--head-bg));
  color: var(--btn-text, #ffffff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

/* TEAL tema */
.theme-teal{
  --btn-primary-bg: linear-gradient(135deg,#0f3d33,#2e6f5e);
  --btn-primary-border: #0f3d33;
  --btn-primary-text: #ffffff;

  --btn-info-bg: linear-gradient(to bottom,#E1F5FE,#B3E5FC);
  --btn-info-bg-hover: linear-gradient(to bottom,#B3E5FC,#81D4FA);
  --btn-info-border: #0288D1;
  --btn-info-text: #01579B;
  --btn-info-text-hover: #004D75;

  --btn-warn-bg: linear-gradient(to bottom,#FFE0B2,#FFB74D);
  --btn-warn-bg-hover: linear-gradient(to bottom,#FFB74D,#FF9800);
  --btn-warn-border: #F57C00;
  --btn-warn-text: #E65100;
  --btn-warn-text-hover: #BF360C;

  --btn-success-bg: linear-gradient(to bottom,#81C784,#4CAF50);
  --btn-success-bg-hover: linear-gradient(to bottom,#66BB6A,#388E3C);
  --btn-success-border: #4CAF50;
  --btn-success-text: #FFFFFF;

  --btn-danger-bg: linear-gradient(to bottom,#FFCDD2,#E57373);
  --btn-danger-bg-hover: linear-gradient(to bottom,#E57373,#F44336);
  --btn-danger-border: #C62828;
  --btn-danger-text: #B71C1C;
  --btn-danger-text-hover: #7F0000;

  --btn-dark-bg: linear-gradient(to bottom,#EEEEEE,#BDBDBD);
  --btn-dark-bg-hover: linear-gradient(to bottom,#757575,#424242);
  --btn-dark-border: #212121;
  --btn-dark-text: #000000;
  --btn-dark-text-hover: #FFFFFF;

  --btn-acqua-bg: linear-gradient(to bottom,#E0F7FA,#80DEEA);
  --btn-acqua-bg-hover: linear-gradient(to bottom,#80DEEA,#26C6DA);
  --btn-acqua-border: #00897B;
  --btn-acqua-text: #00695C;
  --btn-acqua-text-hover: #004D40;

  --btn-pink-bg: linear-gradient(to bottom,#F8BBD0,#F48FB1);
  --btn-pink-bg-hover: linear-gradient(to bottom,#F48FB1,#F06292);
  --btn-pink-border: #D81B60;
  --btn-pink-text: #880E4F;
  --btn-pink-text-hover: #560027;

  --btn-purple-bg: linear-gradient(to bottom,#E1BEE7,#BA68C8);
  --btn-purple-bg-hover: linear-gradient(to bottom,#BA68C8,#8E24AA);
  --btn-purple-border: #6A1B9A;
  --btn-purple-text: #4A148C;
  --btn-purple-text-hover: #311B92;
}

/* RED tema (örnek: primary ve accent tonlarını kırmızıya çekmek istersen) */
.theme-red{
  --btn-primary-bg: linear-gradient(135deg,#7a1d1d,#a52a2a);
  --btn-primary-border: #7a1d1d;
  --btn-primary-text: #ffffff;

  /* İstersen info/warn/success vb aynı kalabilir, ya da temaya göre hafifçe kırmızıya kaydırırsın */
}

.action-btn a,
.action-btn a:link,
.action-btn a:visited {
  text-decoration: none !important;
  color: inherit !important;   /* buton rengini alsın */
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.action-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.action-card {
  /* kart gibi blok */
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 260px;
  padding: 16px 18px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.22);

  /* koyu yeşil cam */
  background: rgba(0, 65, 52, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* kart gölgesi */
  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10);

  color: #fff !important;
  text-decoration: none !important;

  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  background: rgba(0, 90, 70, 0.78);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.action-card:active { transform: translateY(-1px) scale(0.99); }

.action-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
}

.action-card .icon i { font-size: 18px; color: #fff; }

.action-card .text { line-height: 1.1; }
.action-card .title { font-size: 15.5px; font-weight: 900; letter-spacing: .2px; }
.action-card .sub { font-size: 12.5px; font-weight: 700; opacity: .85; margin-top: 6px; }

.description{
  margin: 0;
  opacity: .9;
  font-size: 14px;
}

/* PROFİL KART */
.profil-kart{
  width: 270px;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 12px 10px;
  background: rgba(0, 65, 52, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* FOTO */
.profil-foto img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 20%;
  border: 2px solid #000;
}

/* ALT BİLGİ */
.profil-bilgi{
  text-align: center;
  line-height: 1.3;
}

.profil-bolum{
  font-size: 13px;
  font-weight: 600;
  color: #FF9800;
}

.profil-ad{
  font-size: 15px;
  font-weight: bold;
  color: #d0fff3;
}

/* MOBİL: alt alta gelsin */
@media (max-width: 700px){
  .header-content{
    flex-direction: column;
    align-items: stretch;
  }
  .profil-kart{
    width: 100%;
  }
}
/*  10 satır civarı (satır başına ~42-46px varsayım) */
.menu6-body{
  max-height: 460px; /* 10 satır hedef */
}

/* =========================
   EFEKTLİ MOD (opsiyonel)
   ========================= */
   .menu6-grid{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
.menu6-grid.effect .menu6-body a{
  /* animasyon */
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  transform-origin: left center;
}

/* hover olan satır: en büyük */
.menu6-grid.effect .menu6-body a.m6-hover{
  transform: translateY(-6px) scale(1.08);
  filter: brightness(1.1);
}

/* hover’ın 1 üst/altı */
.menu6-grid.effect .menu6-body a.m6-near1{
  transform: translateY(-3px) scale(1.04);
  opacity: .95;
}

/* hover’ın 2 üst/altı */
.menu6-grid.effect .menu6-body a.m6-near2{
  transform: translateY(-1px) scale(1.02);
  opacity: .90;
}

/* uzaklar biraz silik kalsın */
.menu6-grid.effect .menu6-body a.m6-far{
  opacity: .78;
}

/* alt tarafa doğru “alçalma” hissi için küçük gölge */
.menu6-grid.effect .menu6-body{
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}


/* KART */
.menu6-card{
  position: relative; /* 🔴 ABSOLUTE ANAKOR */
}
/* ÜST BUTON */
.menu6-head{
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, #0f3d33, #06261f);
  color: #fff;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 2px;
  cursor: pointer;
}

/* ALT MENÜ */
.menu6-body{
  position: absolute;
  top: 85px;
  left: 0;
  width: 100%;

  background: #2e6f5e;
  border-radius: 0 0 12px 12px;
  border: 2px solid #000;
  border-top: none;

  display: none;
  z-index: 50;

  /* SCROLL */
  max-height: 460px;          /* yaklaşık 6 satır (6*~46px) */
  overflow-y: auto;
  overflow-x: hidden;
}

/* (İsteğe bağlı) scroll bar daha hoş görünsün */
.menu6-body::-webkit-scrollbar{
  width: 10px;
}
.menu6-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.45);
  border-radius: 10px;
}
.menu6-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.10);
}

/* AÇIK HAL */
.menu6-card.open .menu6-body{
  display: block;
}

/* ALT MENÜ LİNKLER */
.menu6-body a{
  display: block;
  padding: 10px 12px;
  color: #eafff6;
  text-decoration: none;
  font-weight: 600;
}
.menu6-body a:hover{
  background: rgba(255,255,255,0.15);
}
.dropdown { position: relative; }
.dropdown-content{
  position: absolute;
  top: 80px;      /* buton yüksekliği kadar */
  left: 0;
  width: 100%;
  margin-top: 0 !important;
}

/* Responsive */
@media (max-width: 1100px){
  .menu6-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
  .menu6-grid{ grid-template-columns: repeat(1, 1fr); }
}
.dropdown-content{
  background-color: #071827 !important;
}

.dropdown-content tr{
  background-color: #071827 !important;
}

.dropdown-content tr:hover{
  background-color: #0b2740 !important;
}

.dropdown-content a,
.dropdown-content button{
  color: #ffffff !important;
  font-weight: 700;
}
/*  EFEKTLİ MOD: daha güçlü yaklaşma + koyu fon + parlak yazı */
.menu6-grid.effect .menu6-body a{
  transition: transform .16s ease, opacity .16s ease, filter .16s ease, background-color .16s ease, color .16s ease, text-shadow .16s ease;
  transform-origin: left center;
  border-radius: 8px;
}

/* hover: daha büyük + daha koyu fon + glow */
.menu6-grid.effect .menu6-body a.m6-hover{
  transform: translateY(-9px) scale(1.14);
  background-color: rgba(0,0,0,0.35);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255,255,255,0.55);
  filter: brightness(1.25) contrast(1.1);
  opacity: 1;
}

/* 1 yakınlar */
.menu6-grid.effect .menu6-body a.m6-near1{
  transform: translateY(-5px) scale(1.08);
  background-color: rgba(0,0,0,0.22);
  color: #f2fff9;
  text-shadow: 0 0 6px rgba(190,255,235,0.35);
  opacity: .96;
}

/* 2 yakınlar */
.menu6-grid.effect .menu6-body a.m6-near2{
  transform: translateY(-2px) scale(1.04);
  background-color: rgba(0,0,0,0.12);
  color: #eafff6;
  text-shadow: 0 0 3px rgba(190,255,235,0.20);
  opacity: .90;
}

/* uzaklar: daha sönük */
.menu6-grid.effect .menu6-body a.m6-far{
  opacity: .65;
  filter: brightness(.95);
}
.menu6-grid.effect .menu6-body a.m6-hover{
  transform: translateY(-9px) translateX(6px) scale(1.14);
}
/* ========= Tema değişkenleri ========= */
#themeShell{
  --page-bg: #071827;
  --head1: #0f3d33;
  --head2: #06261f;
  --drop-bg: #2e6f5e;
  --drop-hover: rgba(255,255,255,0.15);
  --accent: #3498db;
  --text: #ffffff;
}

/* Teal (senin sevdiğin) */
#themeShell.theme-teal{
  --page-bg:#071827;
  --head1:#0f3d33; --head2:#06261f;
  --drop-bg:#2e6f5e;
  --accent:#38bdf8;
}

/* Blue */
#themeShell.theme-blue{
  --page-bg:#061422;
  --head1:#163b7a; --head2:#0b234e;
  --drop-bg:#1b4fa3;
  --accent:#4aa3ff;
}

/* Purple */
#themeShell.theme-purple{
  --page-bg:#120a22;
  --head1:#4b1b7c; --head2:#2b0f4a;
  --drop-bg:#5e2aa8;
  --accent:#b07cff;
}

/* Red */
#themeShell.theme-red{
  --page-bg:#1b0a0a;
  --head1:#7a1d1d; --head2:#3d0f0f;
  --drop-bg:#a52a2a;
  --accent:#ff6b6b;
}

/* Orange */
#themeShell.theme-orange{
  --page-bg:#1a1206;
  --head1:#8a4a12; --head2:#4a2608;
  --drop-bg:#c66a1e;
  --accent:#ffb14a;
}

/* Slate */
#themeShell.theme-slate{
  --page-bg:#0d1117;
  --head1:#2b2f36; --head2:#14161a;
  --drop-bg:#2f3a46;
  --accent:#8fb3ff;
}

#themeShell.theme-brown {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #5a3a22;
  --drop-hover: rgba(214,164,106,0.18);
  --accent: #5a3a22;
}

#themeShell.theme-emerald {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #0f766e;
  --drop-hover: rgba(52,211,153,0.18);
  --accent: #0f766e;
}

#themeShell.theme-cyan {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #0e7490;
  --drop-hover: rgba(103,232,249,0.18);
  --accent: #0e7490;
}

#themeShell.theme-indigo {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #4338ca;
  --drop-hover: rgba(129,140,248,0.18);
  --accent: #4338ca;
}

#themeShell.theme-gold {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #b45309;
  --drop-hover: rgba(253,224,71,0.18);
  --accent: #b45309;
}

#themeShell.theme-graphite {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #374151;
  --drop-hover: rgba(156,163,175,0.18);
  --accent: #374151;
}

#themeShell.theme-pink {
  --page-bg: #0d1117;
  --head1: #2b2f36;
  --head2: #14161a;
  --drop-bg: #db2777;
  --drop-hover: rgba(244,114,182,0.18);
  --accent: #db2777;
}

#themeShell .dropdown-content,
#themeShell .dropdown-content tr{
  background-color: var(--drop-bg) !important;
}
#themeShell .dropdown-content tr:hover{
  background-color: var(--drop-hover) !important;
}

/* ========= Uygulama ========= */
.menu6-head{
  background: linear-gradient(to bottom, var(--head1), var(--head2)) !important;
  color: var(--text) !important;
}
.menu6-body{ background: var(--drop-bg) !important; }
.menu6-body a:hover{ background: var(--drop-hover) !important; }

/* Üst table arka planını da temaya bağla (menü table’ına class verirsen daha temiz olur) */
.menu-topbar{ background: var(--page-bg) !important; }

/* İçerikte birkaç vurgu (sayfanda varsa çalışır) */
.container h1{ border-bottom: 2px solid var(--accent) !important; }
.input-group{ border-left: 4px solid var(--accent) !important; }

/* ========= Tema seçici UI ========= */
.ui-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 10px 0; color:#fff;
}
.ui-toggle{ display:flex; gap:8px; align-items:center; cursor:pointer; font-weight:800; }

.theme-picker{ display:flex; gap:10px; align-items:center; }
.theme-dot input{ display:none; }
.theme-dot span{
  width:22px; height:22px; border-radius:999px;
  display:inline-block;
  border:2px solid rgba(255,255,255,0.35);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.theme-dot input:checked + span{
  border-color:#fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 3px 12px rgba(0,0,0,0.35);
  transform: scale(1.10);
}
.theme-brown   { --drop-bg:#5a3a22; --drop-hover: rgba(214,164,106,0.18); }
.theme-emerald { --drop-bg:#0f766e; --drop-hover: rgba(52,211,153,0.18); }
.theme-cyan    { --drop-bg:#0e7490; --drop-hover: rgba(103,232,249,0.18); }
.theme-indigo  { --drop-bg:#4338ca; --drop-hover: rgba(129,140,248,0.18); }
.theme-gold    { --drop-bg:#b45309; --drop-hover: rgba(253,224,71,0.18); }
.theme-graphite{ --drop-bg:#374151; --drop-hover: rgba(156,163,175,0.18); }
.theme-pink    { --drop-bg:#db2777; --drop-hover: rgba(244,114,182,0.18); }

/* renkler */
.t-teal span{ background: linear-gradient(135deg,#0f3d33,#2e6f5e); }
.t-blue span{ background: linear-gradient(135deg,#163b7a,#1b4fa3); }
.t-purple span{ background: linear-gradient(135deg,#4b1b7c,#5e2aa8); }
.t-red span{ background: linear-gradient(135deg,#7a1d1d,#a52a2a); }
.t-orange span{ background: linear-gradient(135deg,#8a4a12,#c66a1e); }
.t-slate span{ background: linear-gradient(135deg,#2b2f36,#2f3a46); }
/* Header tema uyumu */
/* Tema dot renkleri */
.theme-dot.t-brown span { background: #5d3a1a; }
.theme-dot.t-emerald span { background: #064e3b; }
.theme-dot.t-cyan span { background: #0e7490; }
.theme-dot.t-indigo span { background: #312e81; }
.theme-dot.t-gold span { background: #b45309; }
.theme-dot.t-graphite span { background: #1f2933; }
.theme-dot.t-pink span { background: #831843; }

/* İç düzen */
.page-header .header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}



/* Responsive */
@media (max-width: 900px){
  .page-header .header-content{ flex-direction:column; align-items:flex-start; }
  .page-header h1{ text-align:left; }
}



/* İç düzen */
.page-header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Yazılar */
.page-header h3 { 
  margin: 0; 
  color: rgba(255,255,255,0.9); 
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.page-header h1 { 
  margin: 8px 0 0 0; 
  color: #ffffff; 
  font-size: 24px;
  text-shadow: 0 0 10px rgba(255,255,255,0.18);
}

.page-header .description { 
  margin-top: 8px; 
  color: rgba(255,255,255,0.85); 
  font-size: 14px;
}
//* Tema sadece zemin ve header'ı etkilesin */
#themeShell{
  min-height: 100vh;
  background: var(--theme-bg, #071827);
  color: var(--theme-text, #fff);
}

/* Header / üst alan */
#themeShell .page-header,
#themeShell .header,
#themeShell header{
  background: var(--head-bg, #0f3d33);
  color: var(--theme-text, #fff);
}

/* Menü aynı kalsın istiyorsan BURAYI SİL, menü zaten kendi gradientini kullanıyor */
#themeShell .menu6-head{
  background: var(--head-bg, #0f3d33);
  color: var(--theme-text, #fff);
}
#themeShell .page-header:hover,
#themeShell .header:hover,
#themeShell header:hover{
  background: var(--head-bg) !important;
  background-image: var(--head-bg) !important;
  filter: none !important;
}

/* ---------- TEMALAR ---------- */

/* TEAL */
.theme-teal{
  --head1: #0f3d33;
  --head2: #06261f;
  --page-bg: #071827;

  /* Zemin gradient */
  --theme-bg: linear-gradient(135deg,#0f3d33,#071827);
  --head-bg: linear-gradient(135deg,#0f3d33,#2e6f5e);

  /* Aksesuar */
  --theme-accent: #38bdf8;
  --theme-text: #ffffff;
}

/* BLUE */
.theme-blue{
  --head1: #163b7a;
  --head2: #0f2a55;
  --page-bg: #071827;

  --theme-bg: linear-gradient(135deg,#0b1730,#071827);
  --head-bg: linear-gradient(135deg,#163b7a,#1b4fa3);

  --theme-accent: #60a5fa;
  --theme-text: #ffffff;
}

/* PURPLE */
.theme-purple{
  --head1: #4b1b7c;
  --head2: #2c0f4a;
  --page-bg: #071827;

  --theme-bg: linear-gradient(135deg,#170b26,#071827);
  --head-bg: linear-gradient(135deg,#4b1b7c,#5e2aa8);

  --theme-accent: #c084fc;
  --theme-text: #ffffff;
}

/* RED */
.theme-red{
  --head1: #7a1d1d;
  --head2: #4b0f0f;
  --page-bg: #071827;

  --theme-bg: linear-gradient(135deg,#2a0a0a,#071827);
  --head-bg: linear-gradient(135deg,#7a1d1d,#a52a2a);

  --theme-accent: #fb7185;
  --theme-text: #ffffff;
}

/* ORANGE */
.theme-orange{
  --head1: #8a4a12;
  --head2: #4a2508;
  --page-bg: #071827;

  --theme-bg: linear-gradient(135deg,#251208,#071827);
  --head-bg: linear-gradient(135deg,#8a4a12,#c66a1e);

  --theme-accent: #fdba74;
  --theme-text: #ffffff;
}

/* SLATE */
.theme-slate{
  --head1: #2b2f36;
  --head2: #1f242b;
  --page-bg: #071827;

  --theme-bg: linear-gradient(135deg,#0f141a,#071827);
  --head-bg: linear-gradient(135deg,#2b2f36,#2f3a46);

  --theme-accent: #94a3b8;
  --theme-text: #ffffff;
}
/* YENİ TEMALAR */

/* BROWN */
.theme-brown {
  --theme-bg: linear-gradient(135deg, #2b1a12, #071827);
  --head-bg: linear-gradient(135deg, #5d3a1a, #8d5a2b);
  --theme-accent: #d6a46a;
  --theme-text: #ffffff;
}

/* EMERALD */
.theme-emerald {
  --theme-bg: linear-gradient(135deg, #052e26, #071827);
  --head-bg: linear-gradient(135deg, #064e3b, #0f766e);
  --theme-accent: #34d399;
  --theme-text: #ffffff;
}

/* CYAN */
.theme-cyan {
  --theme-bg: linear-gradient(135deg, #062a33, #071827);
  --head-bg: linear-gradient(135deg, #0e7490, #22d3ee);
  --theme-accent: #67e8f9;
  --theme-text: #ffffff;
}

/* INDIGO */
.theme-indigo {
  --theme-bg: linear-gradient(135deg, #0c1024, #071827);
  --head-bg: linear-gradient(135deg, #312e81, #4338ca);
  --theme-accent: #818cf8;
  --theme-text: #ffffff;
}

/* GOLD */
.theme-gold {
  --theme-bg: linear-gradient(135deg, #2a1d05, #071827);
  --head-bg: linear-gradient(135deg, #b45309, #facc15);
  --theme-accent: #fde047;
  --theme-text: #ffffff;
}

/* GRAPHITE */
.theme-graphite {
  --theme-bg: linear-gradient(135deg, #0b0f14, #071827);
  --head-bg: linear-gradient(135deg, #1f2933, #374151);
  --theme-accent: #9ca3af;
  --theme-text: #ffffff;
}

/* PINK - Yeni eklenen pembe tema */
.theme-pink {
  --theme-bg: linear-gradient(135deg, #1f0717, #071827);
  --head-bg: linear-gradient(135deg, #831843, #db2777);
  --theme-accent: #f472b6;
  --theme-text: #ffffff;
}
/* BROWN TEMA */
.theme-brown .menu6-head {
  background: linear-gradient(135deg, #5d3a1a, #8d5a2b) !important;
  color: #ffffff !important;
}

.theme-brown .menu6-head:hover {
  background: linear-gradient(135deg, #8d5a2b, #d6a46a) !important;
}

.theme-brown .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(214, 164, 106, 0.1), rgba(214, 164, 106, 0.2)) !important;
  border-left-color: #d6a46a !important;
}

/* EMERALD TEMA */
.theme-emerald .menu6-head {
  background: linear-gradient(135deg, #064e3b, #0f766e) !important;
  color: #ffffff !important;
}

.theme-emerald .menu6-head:hover {
  background: linear-gradient(135deg, #0f766e, #34d399) !important;
}

.theme-emerald .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.2)) !important;
  border-left-color: #34d399 !important;
}

/* CYAN TEMA */
.theme-cyan .menu6-head {
  background: linear-gradient(135deg, #0e7490, #22d3ee) !important;
  color: #ffffff !important;
}

.theme-cyan .menu6-head:hover {
  background: linear-gradient(135deg, #22d3ee, #67e8f9) !important;
}

.theme-cyan .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.1), rgba(103, 232, 249, 0.2)) !important;
  border-left-color: #67e8f9 !important;
}

/* INDIGO TEMA */
.theme-indigo .menu6-head {
  background: linear-gradient(135deg, #312e81, #4338ca) !important;
  color: #ffffff !important;
}

.theme-indigo .menu6-head:hover {
  background: linear-gradient(135deg, #4338ca, #818cf8) !important;
}

.theme-indigo .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.1), rgba(129, 140, 248, 0.2)) !important;
  border-left-color: #818cf8 !important;
}

/* GOLD TEMA */
.theme-gold .menu6-head {
  background: linear-gradient(135deg, #b45309, #facc15) !important;
  color: #000000 !important; /* Koyu renk için siyah yazı */
}

.theme-gold .menu6-head:hover {
  background: linear-gradient(135deg, #facc15, #fde047) !important;
}

.theme-gold .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.1), rgba(253, 224, 71, 0.2)) !important;
  border-left-color: #fde047 !important;
}

/* GRAPHITE TEMA */
.theme-graphite .menu6-head {
  background: linear-gradient(135deg, #1f2933, #374151) !important;
  color: #ffffff !important;
}

.theme-graphite .menu6-head:hover {
  background: linear-gradient(135deg, #374151, #9ca3af) !important;
}

.theme-graphite .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(156, 163, 175, 0.1), rgba(156, 163, 175, 0.2)) !important;
  border-left-color: #9ca3af !important;
}

/* PINK TEMA */
.theme-pink .menu6-head {
  background: linear-gradient(135deg, #831843, #db2777) !important;
  color: #ffffff !important;
}

.theme-pink .menu6-head:hover {
  background: linear-gradient(135deg, #db2777, #f472b6) !important;
}

.theme-pink .menu6-body a:hover {
  background: linear-gradient(90deg, rgba(244, 114, 182, 0.1), rgba(244, 114, 182, 0.2)) !important;
  border-left-color: #f472b6 !important;
}

.profil-kart {
  background: var(--theme-profile-bg);
  border: 4px solid var(--theme-profile-border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}

/* Ortak profil kartı stilleri */
.page-header .profil-kart {
  border-radius: 14px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important;
}

.page-header .profil-kart:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7) !important;
}


.page-header .profil-bolum { 
  font-size: 13px;
  font-weight: 600;
  color: #FF9800;
}

.page-header .profil-ad { 
   font-size: 15px;
  font-weight: bold;
  color: #d0fff3;
}

/* Responsive */
@media (max-width: 900px){
  .page-header .header-content { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 20px !important;
  }
  
  .page-header .profil-kart {
    align-self: flex-end !important;
    margin-top: 10px !important;
  }
  
  .page-header h1 { 
    text-align: left !important; 
    font-size: 20px !important;
  }
}

@media (max-width: 600px){
  .page-header {
    padding: 15px !important;
  }
  
  .page-header .profil-kart {
    padding: 8px 12px !important;
  }
  
  .page-header .profil-foto img {
    width: 45px !important;
    height: 45px !important;
  }
}
/* JavaScript ile eklenen header tema class'ları */
.theme-teal-header {
  background: linear-gradient(135deg, #0a1f2a, #071827) !important;
  border-left: 6px solid #38bdf8 !important;
}

.theme-blue-header {
  background: linear-gradient(135deg, #0a1a2d, #061422) !important;
  border-left: 6px solid #4aa3ff !important;
}

.theme-purple-header {
  background: linear-gradient(135deg, #160c28, #120a22) !important;
  border-left: 6px solid #b07cff !important;
}

.theme-red-header {
  background: linear-gradient(135deg, #2a0a0a, #1b0a0a) !important;
  border-left: 6px solid #ff6b6b !important;
}

.theme-orange-header {
  background: linear-gradient(135deg, #2a1a06, #1a1206) !important;
  border-left: 6px solid #ffb14a !important;
}

.theme-slate-header {
  background: linear-gradient(135deg, #11161d, #0d1117) !important;
  border-left: 6px solid #8fb3ff !important;
}
/* ==== YAKAR BUTTON BASE (hepsi için ortak) ==== */
.yakarm-button,
.yakart-button,
.yakary-button,
.yakark-button,
.yakarsiyah-button,
.yakars-button,
.yakarturkuaz-button,
.yakarp-button,
.yakarmor-button,
.yakartabbas-button{
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.yakarm-button:hover,
.yakart-button:hover,
.yakary-button:hover,
.yakark-button:hover,
.yakarsiyah-button:hover,
.yakars-button:hover,
.yakarturkuaz-button:hover,
.yakarp-button:hover,
.yakarmor-button:hover,
.yakartabbas-button:hover{
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}
/* ==== THEME TOKENS (teal örneği) ==== */
.theme-teal{
  --btn-info-border:#0288D1;   --btn-info-bg:linear-gradient(to bottom,#E1F5FE,#B3E5FC);
  --btn-info-bg-hover:linear-gradient(to bottom,#B3E5FC,#81D4FA); --btn-info-text:#01579B; --btn-info-text-hover:#004D75;

  --btn-warn-border:#F57C00;   --btn-warn-bg:linear-gradient(to bottom,#FFE0B2,#FFB74D);
  --btn-warn-bg-hover:linear-gradient(to bottom,#FFB74D,#FF9800); --btn-warn-text:#E65100; --btn-warn-text-hover:#BF360C;

  --btn-success-border:#4CAF50; --btn-success-bg:linear-gradient(to bottom,#81C784,#4CAF50);
  --btn-success-bg-hover:linear-gradient(to bottom,#66BB6A,#388E3C); --btn-success-text:#FFFFFF;

  --btn-danger-border:#C62828; --btn-danger-bg:linear-gradient(to bottom,#FFCDD2,#E57373);
  --btn-danger-bg-hover:linear-gradient(to bottom,#E57373,#F44336); --btn-danger-text:#B71C1C; --btn-danger-text-hover:#7F0000;

  --btn-dark-border:#212121;   --btn-dark-bg:linear-gradient(to bottom,#EEEEEE,#BDBDBD);
  --btn-dark-bg-hover:linear-gradient(to bottom,#757575,#424242); --btn-dark-text:#000000; --btn-dark-text-hover:#FFFFFF;

  --btn-acqua-border:#00897B;  --btn-acqua-bg:linear-gradient(to bottom,#E0F7FA,#80DEEA);
  --btn-acqua-bg-hover:linear-gradient(to bottom,#80DEEA,#26C6DA); --btn-acqua-text:#00695C; --btn-acqua-text-hover:#004D40;

  --btn-pink-border:#D81B60;   --btn-pink-bg:linear-gradient(to bottom,#F8BBD0,#F48FB1);
  --btn-pink-bg-hover:linear-gradient(to bottom,#F48FB1,#F06292); --btn-pink-text:#880E4F; --btn-pink-text-hover:#560027;

  --btn-purple-border:#6A1B9A; --btn-purple-bg:linear-gradient(to bottom,#E1BEE7,#BA68C8);
  --btn-purple-bg-hover:linear-gradient(to bottom,#BA68C8,#8E24AA); --btn-purple-text:#4A148C; --btn-purple-text-hover:#311B92;

  /* Abbas butonu (senin yeşil) */
  --btn-abbas-bg:linear-gradient(to bottom,#66BB6A,#388E3C);
  --btn-abbas-text:#FFFFFF;
}
/* ==== BUTTONS -> TOKENS ==== */

/* Mavi */
.yakarm-button{
  border-color: var(--btn-info-border, #0288D1);
  background: var(--btn-info-bg, linear-gradient(to bottom,#E1F5FE,#B3E5FC));
  color: var(--btn-info-text, #01579B);
}
.yakarm-button:hover{
  background: var(--btn-info-bg-hover, linear-gradient(to bottom,#B3E5FC,#81D4FA));
  color: var(--btn-info-text-hover, #004D75);
}

/* Turuncu */
.yakart-button{
  border-color: var(--btn-warn-border, #F57C00);
  background: var(--btn-warn-bg, linear-gradient(to bottom,#FFE0B2,#FFB74D));
  color: var(--btn-warn-text, #E65100);
}
.yakart-button:hover{
  background: var(--btn-warn-bg-hover, linear-gradient(to bottom,#FFB74D,#FF9800));
  color: var(--btn-warn-text-hover, #BF360C);
}

/* Yeşil */
.yakary-button{
  border-color: var(--btn-success-border, #4CAF50);
  background: var(--btn-success-bg, linear-gradient(to bottom,#81C784,#4CAF50));
  color: var(--btn-success-text, #FFFFFF);
  font-weight: 600;
}
.yakary-button:hover{
  background: var(--btn-success-bg-hover, linear-gradient(to bottom,#66BB6A,#388E3C));
  color: var(--btn-success-text, #FFFFFF);
  transform: translateY(-1px);
}

/* Kırmızı */
.yakark-button{
  border-color: var(--btn-danger-border, #C62828);
  background: var(--btn-danger-bg, linear-gradient(to bottom,#FFCDD2,#E57373));
  color: var(--btn-danger-text, #B71C1C);
}
.yakark-button:hover{
  background: var(--btn-danger-bg-hover, linear-gradient(to bottom,#E57373,#F44336));
  color: var(--btn-danger-text-hover, #7F0000);
}

/* Siyah/Gri */
.yakarsiyah-button{
  border-color: var(--btn-dark-border, #212121);
  background: var(--btn-dark-bg, linear-gradient(to bottom,#EEEEEE,#BDBDBD));
  color: var(--btn-dark-text, #000000);
}
.yakarsiyah-button:hover{
  background: var(--btn-dark-bg-hover, linear-gradient(to bottom,#757575,#424242));
  color: var(--btn-dark-text-hover, #FFFFFF);
}

/* Sarı (senin .yakars-button'da hover selector hatalıydı: yakarks-button yazmışsın) */
.yakars-button{
  border-color: #FBC02D;
  background: linear-gradient(to bottom,#FFF9C4,#FFF176);
  color: #795548;
}
.yakars-button:hover{
  background: linear-gradient(to bottom,#FFF176,#FDD835);
  color: #5D4037;
}

/* Turkuaz */
.yakarturkuaz-button{
  border-color: var(--btn-acqua-border, #00897B);
  background: var(--btn-acqua-bg, linear-gradient(to bottom,#E0F7FA,#80DEEA));
  color: var(--btn-acqua-text, #00695C);
}
.yakarturkuaz-button:hover{
  background: var(--btn-acqua-bg-hover, linear-gradient(to bottom,#80DEEA,#26C6DA));
  color: var(--btn-acqua-text-hover, #004D40);
}

/* Pembe */
.yakarp-button{
  border-color: var(--btn-pink-border, #D81B60);
  background: var(--btn-pink-bg, linear-gradient(to bottom,#F8BBD0,#F48FB1));
  color: var(--btn-pink-text, #880E4F);
}
.yakarp-button:hover{
  background: var(--btn-pink-bg-hover, linear-gradient(to bottom,#F48FB1,#F06292));
  color: var(--btn-pink-text-hover, #560027);
}

/* Mor */
.yakarmor-button{
  border-color: var(--btn-purple-border, #6A1B9A);
  background: var(--btn-purple-bg, linear-gradient(to bottom,#E1BEE7,#BA68C8));
  color: var(--btn-purple-text, #4A148C);
}
.yakarmor-button:hover{
  background: var(--btn-purple-bg-hover, linear-gradient(to bottom,#BA68C8,#8E24AA));
  color: var(--btn-purple-text-hover, #311B92);
}

.pofuduk-input {
    width: 100%;
    min-width: 250px;
    max-width: 100%;
    padding: 10px 14px;
    border: 2px solid #2196F3;
    border-left: 6px solid #2196F3;
    border-radius: 10px;
    background: linear-gradient(to right, rgba(33,150,243,0.06), #fff);
    font-size: 15px;
    color: #333;
    outline: none;
    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
    transition: all 0.3s ease;

    white-space: pre-wrap;
    line-height: 1.65;
    word-break: break-word;

    max-height: 160px;
    overflow-y: auto;
}

.pofuduk-input:focus {
    border-color: #1976D2;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4);
    background-color: #F5FAFF;
    transform: scale(1.01);
}

.pofuduk-label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #1565C0; /* mavi ton */
    margin-bottom: 6px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(21, 101, 192, 0.15); /* yumuşak gölge */
}
.pofudukk-input {
    width: 200px;
    padding: 10px 14px;
    border: 2px solid #2196F3;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 15px;
    color: #333;
    outline: none;
    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
    transition: all 0.3s ease;
}

.pofudukk-input:focus {
    border-color: #1976D2;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4);
}
.pofudukt-input {
    width: 100%; /* esnek genişlik */
    max-width: 600px; /* çok büyümesin diye sınır koyabilirsin */
    min-height: 80px; /* en az yükseklik */
    padding: 10px 14px;
    border: 2px solid #2196F3;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 15px;
    color: #333;
    outline: none;
    resize: vertical; /* kullanıcı yukarı aşağı büyütebilir */
    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
    transition: all 0.3s ease;
}

.pofudukt-input:focus {
     border-color: #1976D2;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.4);
}
.pofudukk-label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #424242; /* mavi ton */
    margin-bottom: 6px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(21, 101, 192, 0.15); /* yumuşak gölge */
}
/* ALT MENÜ renklendirme - HER ZAMAN temadan gelsin */
#themeShell .menu6-body{
  background: var(--drop-bg) !important;
}

#themeShell .menu6-body a:hover{
  background: var(--drop-hover) !important;
}

/* efektli mod hover arkaplanı da temadan gelsin */
#themeShell .menu6-grid.effect .menu6-body a.m6-hover{
  background-color: var(--drop-effect-hover, rgba(0,0,0,0.35)) !important;
}
#themeShell .menu6-grid.effect .menu6-body a.m6-near1{
  background-color: var(--drop-effect-near1, rgba(0,0,0,0.22)) !important;
}
#themeShell .menu6-grid.effect .menu6-body a.m6-near2{
  background-color: var(--drop-effect-near2, rgba(0,0,0,0.12)) !important;
}
.theme-teal{
  --drop-bg:#2e6f5e;
  --drop-hover: rgba(255,255,255,0.15);
}

.theme-blue{
  --drop-bg:#1b4fa3;
  --drop-hover: rgba(255,255,255,0.16);
}

.theme-brown{
  --drop-bg:#5a3a22;
  --drop-hover: rgba(214,164,106,0.18);
}

.theme-emerald{
  --drop-bg:#0f766e;
  --drop-hover: rgba(52,211,153,0.18);
}

.theme-cyan{
  --drop-bg:#0e7490;
  --drop-hover: rgba(103,232,249,0.18);
}

.theme-indigo{
  --drop-bg:#4338ca;
  --drop-hover: rgba(129,140,248,0.18);
}

.theme-gold{
  --drop-bg:#b45309;
  --drop-hover: rgba(253,224,71,0.18);
}

.theme-graphite{
  --drop-bg:#374151;
  --drop-hover: rgba(156,163,175,0.18);
}

.theme-pink{
  --drop-bg:#db2777;
  --drop-hover: rgba(244,114,182,0.18);
}
#themeShell .dropdown-content,
#themeShell .dropdown-content tr{
  background-color: var(--drop-bg) !important;
}
#themeShell .dropdown-content tr:hover{
  background-color: var(--drop-hover) !important;
}
.metro-surec-wrapper{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin: 25px 0;
    padding: 30px 10px 10px 10px;
    flex-wrap: wrap;
}

.metro-surec-cizgi{
    position: absolute;
    top: 52px;
    left: 4%;
    width: 92%;
    height: 6px;
    background: linear-gradient(90deg, #00bcd4, #4caf50, #ffc107, #ff9800, #e91e63, #673ab7);
    border-radius: 20px;
    z-index: 0;
}

.metro-durak{
    position: relative;
    z-index: 1;
    width: 15.5%;
    min-width: 150px;
    text-align: center;
}

.metro-nokta{
    width: 22px;
    height: 22px;
    margin: 12px auto 10px auto;
    background: #fff;
    border: 5px solid #2196f3;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(33,150,243,0.12);
}

.metro-kart{
    background: #fff;
    border-radius: 18px;
    padding: 12px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
    min-height: 82px;
}

.metro-adet{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #222;
    margin-bottom: 6px;
}

.metro-baslik{
    font-size: 13px;
    font-weight: 600;
    color: #555;
    line-height: 1.3;
}
@media (max-width: 1200px){
    .metro-durak{
        width: 30%;
    }
    .metro-surec-cizgi{
        display: none;
    }
}

@media (max-width: 768px){
    .metro-durak{
        width: 48%;
    }
}

@media (max-width: 480px){
    .metro-durak{
        width: 100%;
    }
}