/* =================================== */
/* TEMEL AYARLAR VE DEĞİŞKENLER      */
/* =================================== */

html {
  scroll-behavior: smooth;
}

:root {
  --arkaplan-rengi: #f0f7ff;
  --yazi-rengi: #333;
  --kart-arkaplan: #ffffff;
  --ana-renk: #007bff;
  --vurgu-rengi: #0056b3;
  --beyaz: #ffffff;
  --gecis-suresi: 0.3s;
}

body.koyu-mod {
  --arkaplan-rengi: #121212;
  --yazi-rengi: #f0f0f0;
  --kart-arkaplan: #1e1e1e;
  --ana-renk: #5C0002; /* Koyu Kırmızı */
  --vurgu-rengi: #3D0001; 
}

/* =================================== */
/* GENEL GÖVDE VE YAZI TİPİ AYARLARI   */
/* (YAZI KÜÇÜLME SORUNU DÜZELTİLDİ)   */
/* =================================== */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--yazi-rengi);
  background-color: var(--arkaplan-rengi);
  margin: 0;
  padding: 0;
  transition: background-color var(--gecis-suresi), color var(--gecis-suresi);
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

.hakkimda-metin p {
  font-size: 1.05rem;
}

.projeler-bolumu h2,
.hakkimda-bolumu h2,
.iletisim-bolumu h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--ana-renk);
  transition: color var(--gecis-suresi);
}

.proje-karti h3,
.hakkimda-beceriler h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 15px;
  color: var(--ana-renk);
  transition: color var(--gecis-suresi);
}

.hakkimda-beceriler li {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
  padding: 8px;
  background-color: var(--arkaplan-rengi);
  border-radius: 5px;
}

/* =================================== */
/* HEADER / NAVİGASYON BÖLÜMÜ      */
/* =================================== */
.site-header {
  background-color: var(--ana-renk);
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--gecis-suresi);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--beyaz);
  text-decoration: none;
  z-index: 110; 
}

/* MASAÜSTÜ: Navigasyonu kusursuz ortalama */
.ana-navigasyon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ana-navigasyon ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 25px;
}

.ana-navigasyon a {
  color: var(--beyaz);
  text-decoration: none;
  font-size: 1.1rem;
  opacity: 0.8;
  transition: opacity 0.3s, border-color 0.3s;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px; 
}

.ana-navigasyon a:hover {
  opacity: 1;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.ana-navigasyon a.active {
  opacity: 1;
  border-bottom-color: var(--beyaz);
}

/* MASAÜSTÜ: Sağ Taraf (Dil + Mod) */
.header-sag-grup {
  display: flex;
  align-items: center;
  gap: 20px; 
}

/* Hamburger İkonu (Masaüstünde Gizli) */
.hamburger-ikon {
  display: none; 
  background: transparent;
  border: none;
  color: var(--beyaz);
  font-size: 28px;
  cursor: pointer;
  z-index: 110; 
}

/* Dil Butonları */
.lang-btn {
  background: transparent;
  border: none;
  color: var(--beyaz);
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.lang-btn:hover {
  opacity: 1;
}

.lang-btn.active {
  opacity: 1;
  border-bottom: 2px solid var(--beyaz);
}

/* Mod Değiştirme (Toggle) */
.mod-degistir-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  align-self: center;
}

.mod-degistir-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  border-radius: 34px;
  background-color: var(--vurgu-rengi);
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  border-radius: 50%;
  transition: transform .4s, background .4s, box-shadow .4s;
  background: radial-gradient(circle at 30% 30%, #ffd54a 0 45%, #f0e130 46% 70%);
  box-shadow: 0 0 6px #f0e130, 0 0 12px rgba(240,225,48,0.18);
}

input:checked + .slider::before {
  transform: translateX(26px);
  background: 
    radial-gradient(circle at 48% 46%, var(--vurgu-rengi) 0 48%, transparent 49%),
    radial-gradient(circle at 73% 50%, var(--beyaz) 0 62%, transparent 63%);
  box-shadow: 0 0 6px rgba(255,255,255,0.95), inset 0 0 4px rgba(255,255,255,0.25);
}

/* =================================== */
/* HERO VE YILDIZLAR                 */
/* =================================== */

.hero-bolumu {
  background-color: #000;
  background-image: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: var(--yazi-rengi);
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  transition: background-color var(--gecis-suresi), color var(--gecis-suresi);
  position: relative;
  overflow: hidden;
}

.hero-icerik {
  position: relative;
  z-index: 10;
  text-align: center;
}

.hero-icerik h1 {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--ana-renk);
  margin-top: 0;
  margin-bottom: 15px;
  transition: color var(--gecis-suresi);
}

.hero-altbaslik {
  font-size: 1.5rem;
  font-weight: 300;
  opacity: 0.9;
  margin-bottom: 40px;
  color: var(--beyaz);
}

.hero-buton {
  display: inline-block;
  background-color: var(--ana-renk);
  color: var(--beyaz);
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color var(--gecis-suresi), transform 0.2s ease-out;
}

.hero-buton:hover {
  background-color: var(--vurgu-rengi);
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

@keyframes move-stars {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1; 
  background: transparent;
  color: #FFF; 
}

/* 1. Katman: Küçük Yıldızlar */
.stars-small {
  width: 1px;
  height: 1px;
  animation: move-stars 50s linear infinite; 
  box-shadow: 799px 926px #FFF, 1031px 406px #FFF, 1515px 338px #FFF, 1545px 1205px #FFF, 93px 852px #FFF, 94px 502px #FFF, 621px 1388px #FFF, 1184px 93px #FFF, 786px 586px #FFF, 1937px 7px #FFF, 1731px 514px #FFF, 1004px 177px #FFF, 1483px 1713px #FFF, 1103px 1018px #FFF, 1111px 414px #FFF, 1262px 1269px #FFF, 1137px 1475px #FFF, 24px 106px #FFF, 1479px 1285px #FFF, 1435px 1645px #FFF, 946px 661px #FFF, 1083px 1374px #FFF, 599px 1277px #FFF, 1287px 590px #FFF, 1599px 1823px #FFF, 915px 1504px #FFF, 1001px 1145px #FFF, 280px 1868px #FFF, 1020px 1202px #FFF, 516px 1476px #FFF, 1207px 1047px #FFF, 1113px 1021px #FFF, 545px 348px #FFF, 1446px 1756px #FFF, 1007px 119px #FFF, 1014px 1045px #FFF, 1532px 1319px #FFF, 1474px 1563px #FFF, 1122px 478px #FFF, 1547px 1177px #FFF, 1146px 411px #FFF, 1371px 1693px #FFF, 629px 403px #FFF, 1374px 1345px #FFF, 1115px 1106px #FFF, 1354px 1851px #FFF, 1050px 1530px #FFF, 1618px 1095px #FFF, 198px 1039px #FFF, 1315px 1820px #FFF, 1060px 1355px #FFF, 1228px 1281px #FFF, 1215px 518px #FFF, 1858px 1017px #FFF, 429px 138px #FFF, 1339px 260px #FFF, 1321px 1162px #FFF, 1103px 751px #FFF, 1551px 1243px #FFF, 381px 1238px #FFF, 1289px 1139px #FFF, 1532px 790px #FFF, 592px 1386px #FFF, 1500px 1987px #FFF, 1132px 1064px #FFF, 1342px 706px #FFF, 1569px 1096px #FFF, 1016px 1012px #FFF, 222px 1888px #FFF, 1160px 1720px #FFF, 736px 1759px #FFF, 1730px 129px #FFF, 731px 1157px #FFF, 1100px 1309px #FFF, 1718px 233px #FFF, 1212px 145px #FFF, 1319px 803px #FFF, 1630px 1163px #FFF, 911px 1361px #FFF, 1205px 1040px #FFF, 1807px 1343px #FFF, 1422px 333px #FFF, 1301px 1121px #FFF, 1140px 1146px #FFF, 1135px 1536px #FFF, 1131px 1668px #FFF, 831px 1840px #FFF, 668px 1970px #FFF, 1039px 1251px #FFF, 1251px 1009px #FFF, 892px 1302px #FFF, 1305px 439px #FFF, 1061px 1566px #FFF, 1614px 1101px #FFF, 1219px 1713px #FFF, 663px 1041px #FFF, 1099px 1845px #FFF, 1968px 432px #FFF, 1391px 1856px #FFF, 1292px 1715px #FFF, 810px 1025px #FFF, 1309px 1738px #FFF, 1008px 574px #FFF, 1827px 1108px #FFF, 1194px 921px #FFF, 1941px 1369px #FFF, 1184px 1794px #FFF, 1219px 767px #FFF, 1073px 1478px #FFF, 1340px 1029px #FFF, 1630px 1874px #FFF, 1581px 1819px #FFF, 1197px 167px #FFF, 321px 406px #FFF, 1073px 1838px #FFF, 1311px 316px #FFF, 1175px 1253px #FFF, 1438px 1020px #FFF, 1295px 1011px #FFF, 650px 1247px #FFF, 1425px 1269px #FFF, 1250px 1214px #FFF, 751px 1500px #FFF, 1690px 1125px #FFF, 1111px 1773px #FFF, 951px 1548px #FFF, 1133px 1644px #FFF, 935px 1032px #FFF, 1410px 1535px #FFF, 1201px 608px #FFF, 1373px 1056px #FFF, 893px 1028px #FFF, 1303px 1318px #FFF, 1279px 1381px #FFF, 1055px 1051px #FFF, 1729px 1245px #FFF, 1354px 1030px #FFF, 714px 1198px #FFF, 1171px 1368px #FFF, 1195px 1024px #FFF, 1131px 718px #FFF, 1404px 1761px #FFF, 1450px 1238px #FFF, 1182px 1706px #FFF, 1157px 1681px #FFF, 1188px 1307px #FFF, 1242px 1378px #FFF, 1162px 1629px #FFF, 1222px 1160px #FFF, 1115px 1131px #FFF, 1303px 1673px #FFF, 1226px 1727px #FFF, 934px 1656px #FFF, 1165px 1323px #FFF, 1151px 1148px #FFF, 1178px 1083px #FFF, 1202px 1680px #FFF, 1135px 1221px #FFF, 1116px 1612px #FFF, 1130px 1354px #FFF, 1117px 1611px #FFF, 1201px 1181px #FFF, 1133px 1453px #FFF, 1166px 1319px #FFF, 1211px 1373px #FFF, 1125px 1288px #FFF, 1154px 1265px #FFF, 1139px 1472px #FFF, 1200px 1401px #FFF, 1142px 1180px #FFF, 1145px 1334px #FFF, 1161px 1526px #FFF, 1193px 1247px #FFF, 1146px 1568px #FFF, 1116px 1431px #FFF;
}

/* 2. Katman: Orta Boy Yıldızlar */
.stars-medium {
  width: 2px;
  height: 2px;
  animation: move-stars 100s linear infinite; 
  box-shadow: 472px 1419px #FFF, 845px 1284px #FFF, 513px 432px #FFF, 1727px 164px #FFF, 1261px 637px #FFF, 1449px 231px #FFF, 535px 1088px #FFF, 1412px 1445px #FFF, 1446px 130px #FFF, 336px 504px #FFF, 501px 1230px #FFF, 1430px 1544px #FFF, 1131px 1111px #FFF, 1335px 1009px #FFF, 420px 1331px #FFF, 1268px 431px #FFF, 452px 1017px #FFF, 1372px 913px #FFF, 922px 556px #FFF, 1108px 1259px #FFF, 1029px 402px #FFF, 480px 1119px #FFF, 1117px 627px #FFF, 70px 1404px #FFF, 1448px 1109px #FFF, 1205px 1032px #FFF, 1008px 138px #FFF, 34px 1114px #FFF, 1421px 1373px #FFF, 1168px 1333px #FFF, 1290px 1425px #FFF, 1423px 1313px #FFF, 581px 1238px #FFF, 1344px 1011px #FFF, 1000px 1228px #FFF, 1432px 1060px #FFF, 1281px 1386px #FFF, 1197px 1184px #FFF, 1370px 1340px #FFF, 1388px 1024px #FFF, 1008px 1132px #FFF, 1210px 1211px #FFF, 1150px 1344px #FFF, 1303px 1074px #FFF, 1208px 1182px #FFF, 1331px 1244px #FFF, 1130px 1447px #FFF, 1229px 1045px #FFF, 1003px 1434px #FFF, 1341px 1148px #FFF, 1028px 1056px #FFF, 1213px 1089px #FFF, 1159px 1031px #FFF, 1076px 1324px #FFF, 1026px 1104px #FFF, 1121px 1046px #FFF, 1064px 1275px #FFF, 1004px 1185px #FFF, 1085px 1015px #FFF, 1049px 1257px #FFF, 1052px 1007px #FFF, 1162px 1166px #FFF, 1020px 1033px #FFF, 1101px 1041px #FFF, 1010px 1098px #FFF, 1090px 1078px #FFF, 1183px 1063px #FFF, 1009px 1282px #FFF, 1110px 1069px #FFF, 1079px 1159px #FFF, 1045px 1058px #FFF, 1098px 1003px #FFF, 1089px 1009px #FFF, 1035px 1125px #FFF, 1030px 1120px #FFF, 1057px 1025px #FFF, 1002px 1062px #FFF, 1015px 1116px #FFF, 1013px 1146px #FFF, 1050px 1035px #FFF, 1071px 1021px #FFF;
}

/* 3. Katman: Büyük Yıldızlar */
.stars-large {
  width: 3px;
  height: 3px;
  animation: move-stars 150s linear infinite; 
  box-shadow: 1727px 164px #FFF, 1261px 637px #FFF, 1449px 231px #FFF, 535px 1088px #FFF, 1412px 1445px #FFF, 1446px 130px #FFF, 336px 504px #FFF, 501px 1230px #FFF, 1430px 1544px #FFF, 1131px 1111px #FFF, 1335px 1009px #FFF, 420px 1331px #FFF, 1268px 431px #FFF, 452px 1017px #FFF, 1372px 913px #FFF, 922px 556px #FFF, 1108px 1259px #FFF, 1029px 402px #FFF, 480px 1119px #FFF, 1117px 627px #FFF, 70px 1404px #FFF, 1448px 1109px #FFF, 1205px 1032px #FFF, 1008px 138px #FFF, 34px 1114px #FFF, 1421px 1373px #FFF, 1168px 1333px #FFF, 1290px 1425px #FFF, 1423px 1313px #FFF, 581px 1238px #FFF, 1344px 1011px #FFF, 1000px 1228px #FFF, 1432px 1060px #FFF, 1281px 1386px #FFF, 1197px 1184px #FFF, 1370px 1340px #FFF, 1388px 1024px #FFF, 1008px 1132px #FFF, 1210px 1211px #FFF, 1150px 1344px #FFF, 1303px 1074px #FFF, 1208px 1182px #FFF, 1331px 1244px #FFF, 1130px 1447px #FFF, 1229px 1045px #FFF, 1003px 1434px #FFF, 1341px 1148px #FFF, 1028px 1056px #FFF, 1213px 1089px #FFF, 1159px 1031px #FFF, 1076px 1324px #FFF, 1026px 1104px #FFF, 1121px 1046px #FFF, 1064px 1275px #FFF, 1004px 1185px #FFF, 1085px 1015px #FFF, 1049px 1257px #FFF, 1052px 1007px #FFF, 1162px 1166px #FFF, 1020px 1033px #FFF, 1101px 1041px #FFF, 1010px 1098px #FFF, 1090px 1078px #FFF, 1183px 1063px #FFF, 1009px 1282px #FFF, 1110px 1069px #FFF, 1079px 1159px #FFF, 1045px 1058px #FFF, 1098px 1003px #FFF, 1089px 1009px #FFF, 1035px 1125px #FFF, 1030px 1120px #FFF, 1057px 1025px #FFF, 1002px 1062px #FFF, 1015px 1116px #FFF, 1013px 1146px #FFF, 1050px 1035px #FFF, 1071px 1021px #FFF;
}

/* =================================== */
/* PROJELERİM BÖLÜMÜ                 */
/* =================================== */
.projeler-bolumu {
  padding: 60px 20px;
  text-align: center;
  background-color: var(--arkaplan-rengi);
}
.proje-listesi {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 20px; 
}
.proje-karti {
  background-color: var(--kart-arkaplan); 
  color: var(--yazi-rengi);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  width: 320px; 
  padding: 20px;
  transition: background-color var(--gecis-suresi), color var(--gecis-suresi), transform 0.3s;
}
.proje-karti:hover {
  transform: translateY(-5px); 
}
.proje-linki, .proje-kodu {
  display: inline-block;
  margin-top: 10px;
  margin-right: 5px;
  padding: 10px 15px;
  background-color: var(--ana-renk); 
  color: var(--beyaz);
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.proje-linki:hover, .proje-kodu:hover {
  background-color: var(--vurgu-rengi);
}

/* =================================== */
/* HAKKIMDA BÖLÜMÜ                 */
/* =================================== */
.hakkimda-bolumu {
  padding: 60px 20px;
  text-align: center;
  background-color: var(--arkaplan-rengi); 
  color: var(--yazi-rengi);
  transition: background-color var(--gecis-suresi), color var(--gecis-suresi);
}
.hakkimda-icerik {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  gap: 40px; 
  max-width: 1000px; 
  margin: 0 auto; 
  text-align: left; 
}
.hakkimda-metin {
  flex: 2; 
  min-width: 300px;
}
.hakkimda-metin .hedef-cumlesi {
  font-style: italic;
  opacity: 0.9;
  border-left: 4px solid var(--ana-renk); 
  padding-left: 15px;
}
.hakkimda-beceriler {
  flex: 1; 
  min-width: 250px;
  background-color: var(--kart-arkaplan); 
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  align-self: flex-start; 
}
.hakkimda-beceriler ul {
  list-style: none;
  padding: 0;
}

/* =================================== */
/* İLETİŞİM FORMU BÖLÜMÜ           */
/* =================================== */
.iletisim-bolumu {
  padding: 60px 20px;
  background-color: var(--arkaplan-rengi);
  color: var(--yazi-rengi);
  text-align: center;
  transition: background-color var(--gecis-suresi), color var(--gecis-suresi);
}
.iletisim-altbaslik {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 40px;
}
#iletisim-formu {
  max-width: 600px; 
  margin: 0 auto; 
  text-align: left; 
}
.form-grup {
  margin-bottom: 25px;
}
.form-grup label {
  display: block; 
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--yazi-rengi);
}
#iletisim-formu input[type="text"],
#iletisim-formu input[type="email"],
#iletisim-formu textarea {
  width: 100%;
  padding: 12px;
  box-sizing: border-box; 
  border-radius: 5px;
  font-size: 1rem;
  background-color: var(--kart-arkaplan); 
  color: var(--yazi-rengi);
  border: 2px solid var(--ana-renk); 
  transition: all var(--gecis-suresi);
}
#iletisim-formu input:focus,
#iletisim-formu textarea:focus {
  outline: none;
  box-shadow: 0 0 10px var(--ana-renk); 
}
.text-center {
  text-align: center;
}
.form-gonder-btn {
  display: inline-block;
  background-color: var(--ana-renk);
  color: var(--beyaz);
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background-color var(--gecis-suresi), transform 0.2s ease-out;
}
.form-gonder-btn:hover {
  background-color: var(--vurgu-rengi);
  transform: translateY(-2px);
}

/* ESKİ MESAJ KUTUSU (Toast varken gizlendi) */
#form-sonuc-mesaji {
  display: none;
}

/* =================================== */
/* FOOTER BÖLÜMÜ                 */
/* =================================== */

.site-footer {
  background-color: var(--ana-renk);
  color: var(--beyaz);               
  padding: 40px 20px;
  text-align: center;
  margin-top: 60px; 
  transition: background-color var(--gecis-suresi);
}
.footer-sosyal {
  margin-bottom: 25px;
}
.footer-sosyal a {
  display: inline-block;
  margin: 0 15px; 
  transition: transform 0.3s ease-out; 
}
.footer-sosyal .fa { 
  font-size: 30px; 
  color: var(--beyaz); 
  opacity: 0.8;
  transition: opacity 0.3s ease-out;
  text-decoration: none; 
}
.footer-sosyal a:hover {
  transform: translateY(-4px); 
}
.footer-sosyal a:hover .fa {
  opacity: 1; 
}
.footer-copyright {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7; 
}

/* =================================== */
/* BAŞA DÖN BUTONU (CSS)           */
/* =================================== */

#basaDonBtn {
  position: fixed;  
  bottom: 30px;      
  right: 30px;       
  z-index: 999;      
  background-color: var(--ana-renk); 
  color: var(--beyaz);               
  width: 50px;                       
  height: 50px;                      
  border-radius: 50%;                
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px; 
  text-decoration: none; 
  transition: all 0.3s ease-out; 
  opacity: 0;
  visibility: hidden;
}
#basaDonBtn:hover {
  background-color: var(--vurgu-rengi); 
  transform: translateY(-4px); 
  cursor: pointer;
}
#basaDonBtn.show {
  opacity: 1;
  visibility: visible;
}

/* =================================== */
/* TOAST BİLDİRİMİ (Şık Uyarı)       */
/* =================================== */

#toast-notification {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 2000;
  min-width: 250px;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.toast-hide {
  opacity: 0;
  transform: translateX(120%); 
}
.toast-show {
  opacity: 1;
  transform: translateX(0);
}
#toast-icon {
  font-size: 1.5rem;
  margin-right: 10px;
}
#toast-notification.success {
  background-color: #4CAF50;
  color: white;
}
#toast-notification.error {
  background-color: #f44336;
  color: white;
}
body.koyu-mod #toast-notification.error {
  background-color: #5C0002; /* Koyu Mod Hata Rengi */
}

/* =================================== */
/* FADE-IN ANİMASYONU (İPTAL ETMİŞTİK) */
/* (Bu kodlar artık yok)             */
/* =================================== */


/* =================================== */
/* MOBİL UYUMLULUK (HAMBURGER MENÜ)    */
/* =================================== */

@media (max-width: 850px) {

  .logo {
    font-size: 1.3rem; 
  }

  /* Masaüstü menüsünü ve sağ grubu gizle */
  .ana-navigasyon, 
  .header-sag-grup {
    display: none;
  }

  /* Hamburger ikonunu göster */
  .hamburger-ikon {
    display: block;
  }

  /* Mobil Menü Kutusu (Açılır Kutu) */
  .nav-ve-kontroller {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    top: 80px; 
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--arkaplan-rengi);
    z-index: 90;

    /* İçerik Düzeni */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  /* AÇIK MENÜ STİLİ (JS bunu ekler) */
  .nav-ve-kontroller.mobil-aktif {
    display: flex;
  }

  /* Mobil menü içindeki navigasyon */
  .nav-ve-kontroller.mobil-aktif .ana-navigasyon {
    display: block;
    position: static;
    transform: none;
  }

  .nav-ve-kontroller.mobil-aktif .ana-navigasyon ul {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  /* Mobil menü içindeki kontroller */
  .nav-ve-kontroller.mobil-aktif .header-sag-grup {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: static;
    transform: none;
  }
  
  /* Mobil link/buton stilleri */
  .nav-ve-kontroller.mobil-aktif .ana-navigasyon a {
    font-size: 1.5rem;
    color: var(--yazi-rengi);
    opacity: 1;
    border-bottom-color: var(--ana-renk);
  }
  .nav-ve-kontroller.mobil-aktif .lang-btn {
    color: var(--yazi-rengi);
    font-size: 1.2rem;
  }
}