:root {
  --web-primary-color: #274f90;
  --web-accent-color: #98afc8;
  --web-background-color: #011d3c;
  --web-box-shadow-light: 0 4px 6px rgba(0,0,0,0.1);
} 
 
 html, body {
     margin: 0;
     padding: 0;
     scroll-behavior: smooth;
}
 body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100vw;
     background: url('../images/anamenu4.png') no-repeat center center/cover;
     z-index: -1;
}
 .hero {
     background: url('https://www.stanford.edu/wp-content/uploads/2025/06/20250615_2025_Commencement_N6A4799.jpg') center/cover no-repeat;
     color: white;
     text-shadow: 0 1px 3px rgba(0,0,0,0.6);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 15px;
}
 .hero-slide {
     min-height: 100vh;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
     color: white;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
 .hero-slide::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
    /*background: rgba(0,0,0,0.4);
    /* karartma efekti */
     z-index: 1;
}
 .hero-slide .content {
     position: absolute;
     z-index: 2;
     max-width: 800px;
     padding: 20px;
     bottom:30px;
}
 .navbar-transparent {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)) !important;
     transition: background-color 0.3s;
}
 .navbar .nav-link, .navbar .navbar-brand {
     color: white !important;
     font-weight: bold;
}
 .navbar-toggler {
     border-color: white;
}
 .navbar-toggler-icon {
     filter: invert(1);
}
 .fullscreen-menu {
     position: fixed;
     top: 0;
     right: -100%;
     width: 100%;
     height: 100%;
     background-color: rgba(54, 120, 227, 0.95);
     overflow-y: auto;
     transition: right 0.5s ease;
     z-index: 1050;
}
 .fullscreen-menu.active {
     right: 0;
}
 .close-button {
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 2rem;
     cursor: pointer;
     color: white;
}
 .hoverable{
     display:inline-block;
     backface-visibility: hidden;
     vertical-align: middle;
     position:relative;
     box-shadow: 0 0 1px rgba(0,0,0,0);
     transform: translateZ(0);
     transition-duration: .3s;
     transition-property:transform;
}
 .hoverable:before{
     position:absolute;
     pointer-events: none;
     z-index:-1;
     content: '';
     top: 100%;
     left: 5%;
     height:10px;
     width:90%;
     opacity:0;
     background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
     background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
     transition-duration: 0.3s;
     transition-property: transform, opacity;
}
 .hoverable:hover, .hoverable:active, .hoverable:focus{
     transform: translateY(-5px);
}
 .hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before{
     opacity: 1;
     transform: translateY(-5px);
}
 @keyframes bounce-animation {
     16.65% {
         -webkit-transform: translateY(8px);
         transform: translateY(8px);
    }
     33.3% {
         -webkit-transform: translateY(-6px);
         transform: translateY(-6px);
    }
     49.95% {
         -webkit-transform: translateY(4px);
         transform: translateY(4px);
    }
     66.6% {
         -webkit-transform: translateY(-2px);
         transform: translateY(-2px);
    }
     83.25% {
         -webkit-transform: translateY(1px);
         transform: translateY(1px);
    }
     100% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 .bounce {
     animation-name: bounce-animation;
     animation-duration: 2s;
}
 @media (min-width: 768px) {
     .navbar{
         text-align: center !important;
         float: none;
         display: inline-block;
    }
}
 nav {
     background: none !important;
     text-transform:uppercase;
     li {
         a{
             transition: .5s color ease-in-out;
        }
    }
}
 .page-title {
     opacity: .75 !important;
}
 .overlay {
     position: fixed;
     top: 0;
     right: -100%;
     width: 100%;
     height: 100%;
     background-color: var(--web-background-color);
     opacity: 0.95;
     color: white;
     transition: right 0.4s ease;
     z-index: 1050;
     display: flex;
     flex-direction: row;
}
 .overlay.active {
     right: 0;
}
 .menu-panel {
     width: 30%;
     min-width: 200px;
     padding: 1.5rem;
     overflow-y: auto;
}
 .content-panel {
     flex: 1;
     padding: 1.5rem;
     overflow-y: auto;
}
 .content-panel ul{
     text-align: left;
}
 .content-panel li{
     padding: 0.5em 0;
}
 .content-panel li a:hover{
     color: #0d6efd;
}
 .content-panel li>a{
     color: white;
     text-decoration: none;
}
 .menu-item {
     cursor: pointer;
     padding: 0.5rem 0;
}
 .menu-item a{
     color:white;
     text-decoration: none;
    ;
}
 .menu-item a:hover {
     color: #0d6efd;
}
 .menu-item:hover {
     color: #0d6efd;
}
 @media (max-width: 768px) {
     .overlay {
         flex-direction: column;
    }
     .menu-panel {
         width: 100%;
         border-right: none;
    }
     .menu-item-logo{
         display: none;
        ;
    }
     .navbar-brand{
         margin-top:15px;
    }
     .navbar-toggler{
         margin-top:15px;
    }
     .header-links li{
         font-size:7px !important;
    }
     #navMenu{
         margin-left:5vw;
    }
}
 @media (min-width: 768px){
     .menu-item-first {
         font: 400 normal 100% / 1.5 GT America Standard Regular;
         font-size: 40px;
    }
}
 #closeMenu {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: 30px;
     cursor: pointer;
     color: white;
}
 .header-top {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     background-color: transparent;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 100;
     padding: 10px 20px;
     border-bottom: none;
     transition: transform 0.3s ease, opacity 0.3s ease;
}
 .header-links {
     list-style: none;
     display: flex;
     gap: 0;
     margin: 0;
     padding: 0;
     font-size:12px;
}
 .header-links li {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     text-align: center;
}
 .header-links li:last-child {
     border-right: none;
}
 .header-links li a {
     text-decoration: none;
     color: white;
     font-weight: bold;
     transition: color 0.3s ease;
     display: block;
     width: 100%;
}
 .header-links li a:hover {
     color: #ccc;
}
 .affix {
     background-color: var(--web-background-color) !important;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     padding: 0.5rem 1rem;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 999;
}
 .carousel-control-prev, .carousel-control-next {
     display: none;
}
 .carousel-indicators {
     bottom: 10px;
}
 .carousel-indicators [data-bs-target] {
     width: 25px;
     height: 4px;
     background-color: transparent;
     border-radius: 2px;
     opacity: 1;
     border: 1px solid #aaa;
     box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
     transition: background-color 0.3s;
}
 .carousel-indicators .active {
     background-color: var(--web-background-color);
     border-color: #eee;
}
 .announcement-card {
     position: relative;
     min-height: 180px;
     background-color: var(--web-primary-color);
     border: 1px solid #e0e0e0;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s, box-shadow 0.3s !important;
     padding-bottom: 2.5rem;
     overflow: visible !important;
}
 .announcement-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
 .announcement-card .card-title {
     font-size: 1.2em;
     color: #e0e0e0;
     text-align: center;
}
 .announcement-card .card-text {
     font-size: 1em;
     color: #e0e0e0;
     line-height: 1.5;
}
 .announcement-card a {
     font-size: 1em;
     color: var(--web-accent-color);
     font-weight: bold;
     text-decoration: none;
}
 .announcement-card a:hover {
     color: white;
}
 .announcement-date {
     font-size: 1.3em;
     color: var(--web-accent-color);
     padding: 4px 10px;
     border-radius: 6px;
     align-self: end;
     width: fit-content;
}
 .announcement-date-badge {
     position: absolute;
     bottom: -0.70rem;
     background-color: var(--web-accent-color);
     color: #fff;
     padding: 6px 14px;
     font-size: .95rem;
     border-radius: 6px;
     font-weight: 500;
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
     box-shadow: 0 2px 6px rgba(0,0,0,.15);
     z-index: 1;
}
 .announcement-card .card-body {
     padding-top: 2.5rem;
     padding-bottom: 1rem;
     text-align: center;
}
 .row, .container {
     overflow: visible !important;
}

 .section-title {
     font-size: 2.5rem;
     color: #002147;
     margin-bottom: 2rem;
}
 .masonry-grid {
     column-count: 4;
     column-gap: 1rem;
}
 .masonry-item {
     break-inside: avoid;
     margin-bottom: 1rem;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     transition: transform 0.3s ease-in-out;
}
 .masonry-item img {
     width: 100%;
     display: block;
     transition: transform 0.3s;
     border-radius: 10px;
}
 .masonry-item:hover img {
     transform: scale(1.04);
}
 .tall {
     height: 410px;
}
 .wide {
     height: 300px;
}
 .small {
     height: 190px;
}
 .masonry-item img {
     object-fit: cover;
     height: 100%;
}
 @media (max-width: 992px) {
     .masonry-grid {
         column-count: 2;
    }
}
 @media (max-width: 576px) {
     .masonry-grid {
         column-count: 1;
    }
}

 .icon-link i {
     color: #002147;
     font-size: 1.25rem;
     transition: transform 0.3s ease, color 0.3s ease;
}
 .icon-link:hover i {
     transform: scale(1.2) translateX(4px);
     color: #002147;
}

 .event-row {
     display: flex;
     justify-content: center;
     gap: 5rem;
     flex-wrap: nowrap;
     overflow: hidden;
     padding: 2rem 0;
}
 .event-card {
     width: 200px;
     height: 350px;
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     transition: transform .35s, box-shadow .35s;
     transform-origin: left top;
     display: flex;
     flex-direction: column;
}
 @media (hover:hover){
     .event-card:hover{
         transform:scale(1.08);
         box-shadow:0 12px 24px rgba(0,0,0,.2);
         z-index:10;
    }
}
 .event-card:hover {
     transform: scale(1.08);
     box-shadow: 0 12px 24px rgba(0,0,0,0.2);
     z-index: 10;
}
 .img-container{
     height:220px;
     overflow:visible;
     position:relative 
}
 .img-container img{
     width:100%;
     height:100%;
     object-fit:cover;
     display:block 
}
 .event-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
 .date-badge {
     position:absolute;
     left:12px;
     bottom:-10px;
     background:var(--web-primary-color);
     color:#fff;
     font-size:.8rem;
     padding:4px 10px;
     border-radius:5px;
     font-weight:500;
     text-align: center;
     font-family: sans-serif;
     z-index:1;
     line-height: 1.2;
}
 .date-badge .day {
     display: block;
     font-size: 1.2rem;
     font-weight: bold;
}
 .date-badge .month {
     display: block;
     font-size: 0.75rem;
     font-weight: normal;
     letter-spacing: 0.5px;
     text-transform: uppercase;
}
 .card-body {
     padding: 0.75rem 1rem;
     text-align: center;
     flex: 0 0 auto;
     transition: flex 0.4s ease;
     overflow: hidden;
}
 .cards-body{
     position:absolute;
     bottom:0;
     left:0;
     width:100%;
     padding:0.90rem 1rem;
     text-align:center;
     background:#fff;
     transform:translateY(100%);
     transition:transform .35s;
}

 .card-title {
     font-size: 1.3rem;
     color: #002147;
     margin-bottom: 0.4rem;
}
 .event-title-box {
     padding: 0.5rem 1rem;
     text-align: center;
}
 .card-description {
     font-size: 0.75rem;
     color: #555;
     opacity: 0;
     transition: all 0.4s ease;
}
 .cards-description{
     font-size:.8rem;
     color:#555;
     margin-bottom:0;
     opacity:0;
     transition:opacity .35s;
}
 @media (hover:hover){
     .event-card:hover .card-description{
         opacity:1;
    }
}
 @media (hover:hover){
     .event-card:hover .cards-body{
         transform:translateY(0);
    }
}

 @media (hover:none){
     .cards-body{
        transform:translateY(0);
    }
     .cards-description{
         opacity:1;
    }
}
 .event-card:hover .cards-description {
     opacity: 1;
     max-height: 100px;
     margin-top: 0.5rem;
}

 .event-row::-webkit-scrollbar {
     display: none;
}
 .event-row {
     scrollbar-width: none;
}

 .overlays{
     position:absolute;
     bottom:0;
     left:0;
     width:100%;
     background:#fff;
     padding:.75rem 1rem;
     text-align:center;
}
 .overlays .title{
     font-size:1rem;
     color:#002147;
     margin:0;
}
 .overlays .desc{
     font-size:.8rem;
     color:#555;
     opacity:0;
     max-height:0;
     overflow:hidden;
     transition:opacity .35s,max-height .35s;
}
 @media (hover:hover){
     .event-card:hover .overlays .desc{
         opacity:1;
         max-height:120px;
         margin-top:.5rem;
    }
}
 @media (max-width: 575.98px) {
     .event-row{
         justify-content: center;
         flex-wrap: wrap;
    }
     .event-card{
         margin-left:auto;
         margin-right:auto;
    }
}
 .scroll-section {
     background-color: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     border-radius: 8px;
     opacity: 0;
     transform: translateY(100px);
     transition: all 1s ease;
     position: relative;
     z-index: 2;
}
 .section-content {
     margin-bottom: 0;
     padding-top: 60px;
     padding-bottom: 60px;
}
 .scroll-section.visible {
     opacity: 1;
     transform: translateY(0);
}
 .section-title {
     font-size: 2.4rem;
     color: #002147;
     margin-bottom: 1rem;
}
 .number-box i {
     font-size: 40px;
     color: #002147;
}
 .number-box p {
     margin-top: 10px;
     font-size: 1.2rem;
}
 .hover-card {
     position: relative;
     width: 100%;
     height: 250px;
     overflow: hidden;
     border-radius: 8px;
     cursor: pointer;
     background-color: #000;
}
 .hover-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.5s ease;
}
 .hover-card:hover img {
     transform: scale(1.05);
}
 .overlayap {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: rgba(0, 33, 71, 0.8);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     opacity: 0;
     transition: opacity 0.5s ease;
     padding: 20px;
}
 .hover-card:hover .overlayap {
     opacity: 1;
}
 .overlay-text h5 {
     font-size: 1.4rem;
     font-weight: bold;
}
 .overlay-text p {
     font-size: 1rem;
     margin-top: 10px;
}
 .slider-wrapper {
     display: flex;
     transition: transform 0.5s ease-in-out;
     will-change: transform;
}
 .news-item {
     flex: 0 0 auto;
     width: 300px;
     margin-right: 15px;
     transition: transform 0.3s ease;
}
 .news-item a{
     text-decoration: none;
}
 .news-item:hover {
     transform: scale(1.03);
}
 .card-img-top {
     height: 180px;
     object-fit: cover;
     transition: transform 0.4s ease;
}
 .card:hover .card-img-top {
     transform: scale(1.05);
}
 .btn-slider {
     z-index: 10;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgba(255, 255, 255, 0.8);
     color: #002147;
     border: none;
}
 .btn-slider:hover {
     background-color: rgba(255, 255, 255, 1);
}
 .card {
     cursor: pointer;
     overflow: hidden;
     height: 100%;
     transition: box-shadow 0.3s;
}
 .card:hover {
     box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
 .lead{
     font-size:50px;
}
 @media (max-width: 768px) {
     .news-item {
         width: 85%;
    }
}
 footer{
     background-color: var(--web-background-color) !important;
}
 .search-container {
     display: flex;
     align-items: center;
}
 .search-box {
     display: flex;
     align-items: center;
     position: relative;
}
 .search-input {
     width: 0;
     padding: 0;
     border: none;
     outline: none;
     background-color: transparent;
     color: white;
     font-size: 16px;
     transition: width 0.3s ease, padding 0.3s ease;
}
 .search-input::placeholder {
     color: rgba(255, 255, 255, 0.7);
}
 .search-icon {
     font-size: 18px;
     color: white;
     cursor: pointer;
     transition: color 0.3s ease;
}
 .search-icon:hover {
     color: #ccc;
}

 .search-box.active .search-input {
     width: 150px;
     padding: 5px 10px;
     border-bottom: 1px solid white;
}
 .len{
     font-size: 2rem;
}
 @media (max-width: 991.98px) {
     .dynamic-submenu {
         padding: 5px 10px;
    }
     #subMenu{
         display: none;
        ;
    }
     #menuContent{
         display: none;
    }
     .dynamic-content li{
         padding:10px 5px;
    }
     .dynamic-content li a{
         text-decoration: none;
         color:white;
    }
     .navbar-brand img{
         width:150px !important;
    }
     .navbar-brand{
         margin-left:-5vw;
    }
}
 .navbar-brand img{
     width:200px;
}
 .sosyalMedya{
     text-align:center;
}
 .sosyalMedya a{
     font-size: 50px;
     padding:0 10px;
}

.header-links{position:absolute;top:10px;right:20px;display:flex;gap:1.5rem;list-style:none;color:#fff;font-family:sans-serif}
.header-links a{text-decoration:none;color:#fff;text-transform:uppercase;letter-spacing:.3px}
.header-links a:hover{color:#d6e0f0}

.mega-screen{
  position:fixed;inset:0;
  background:#002147;color:#fff;
  transform:translateY(-100%);
  transition:transform .45s ease;
  z-index:1050;overflow-y:auto;
}

.mega-screen.open{transform:translateY(0);}


.group-title{color:#fff;font-size:1.1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}

.mega-btn{
  display:block;
  background:#365d90;
  color:#fff;
  padding:.55rem .75rem;
  border-radius:.4rem;
  font-size:.9rem;
  text-decoration:none;
  transition:background .25s;
}
.mega-btn:hover{background:#2b4b76;color:#fff}

.close-btn{
  position:absolute;top:18px;right:24px;
  background:none;border:0;font-size:2rem;color:#fff;cursor:pointer;
  z-index:2;
}


body.noscroll{overflow:hidden}

.mega-btn{
  display:block;
  padding:.55rem .9rem;
  border-radius:.5rem;
  font-size:.9rem;
  color:#fff;
  text-decoration:none;
  transition:background-color .25s;
}

.mega-col:nth-child(1) .mega-btn{
  background:#365d90;
}
.mega-col:nth-child(1) .mega-btn:hover{
  background:#2b4b76;
}

.mega-col:nth-child(2) .mega-btn{
  background:#4b628d;
}
.mega-col:nth-child(2) .mega-btn:hover{
  background:#3a4f73;
}

.mega-col:nth-child(3) .mega-btn{
  background:#5f7091;
}
.mega-col:nth-child(3) .mega-btn:hover{
  background:#44577a;
}

.mega-col:nth-child(4n+4) .mega-btn{ 
  background:#657da8;
}
.mega-col:nth-child(4n+4) .mega-btn:hover{
  background:#506388;
}

.panel-toggle {
  margin-right: 5px;
}

.panel-toggle:last-child {
  margin-right: 0;
}

#adayPanel {
  background-color: #0b2344;
}

.aday-image{
  background-image: url('https://cdn.bartin.edu.tr/www/dosyalar/images/aday.jpg'); 
  background-size: cover;
  background-position: center;
  height: 100%;

}
.blur-divider {
  position: absolute;
  top: 0;
  right: -20px; 
  width: 80px; 
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0), #0b2344);
  filter: blur(20px); 
  z-index: 2;
  pointer-events: none;
}

.mezun-image{
  background-image: url('https://cdn.bartin.edu.tr/www/dosyalar/images/mezun.jpg');
  background-size: cover;
  background-position: center;
  height: 100%;
}

#personelPanel::before{
  content:"";
  position:absolute; inset:0;
  background:url("https://cdn.bartin.edu.tr/www/dosyalar/images/panel-background.jpg") center/cover no-repeat;
  opacity:.05;
  z-index:0;
}

#personelPanel > .container{
  position:relative;
  z-index:1;
}

#ogrenciPanel > .container{
  position:relative;
  z-index:1;
}
#ogrenciPanel::before{
  content:"";
  position:absolute; inset:0;
  background:url("https://cdn.bartin.edu.tr/www/dosyalar/images/panel-background.jpg") center/cover no-repeat;
  opacity:.05;
  z-index:0;
}

.mega-btn{
  background-color:#4a5a78;
  color:#fff;
  opacity:1 !important;
  position:relative;
  z-index:1;
}

.nav-link.dropdown-toggle {
  color: #ffffff;
}
.nav-link.dropdown-toggle:hover {
  color: #d6e0f0;
}

.dropdown-menu {
  background-color: #002147;
  border: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.dropdown-item {
  color: #d6e0f0;
  font-size: 0.9rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: #ffffff;
  background-color: #274f90;
}

.card-img-top.thumb {
      height: 120px;
      object-fit: contain;
      background-color: #f8f9fa;
      padding: 5px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
.swiper-button-next, .swiper-button-prev {
      color: white;
}

.modal-content {
  background-color: #000;
  border: none;
}
@media (max-width: 767.98px) {
  .modal-dialog {
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    max-height: 100vh;
  }
  .modal-content {
    height: 100vh;
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  .modal-dialog {
    max-width: 900px;
    margin: 1.75rem auto;
  }
  .modal-content {
    border-radius: 0.3rem;
  }
}
.modal-header {
    background-color: #111;
    color: white;
    border-bottom: 1px solid #333;
  }

.modal-title {
    color: white;
}

.btn-close {
    filter: invert(1); /* Beyaz "X" için */
}

@media (max-width: 767.98px) {
    .modal-header {
      padding: 0.5rem 1rem;
    }
    .btn-close {
      margin-top: 4px;
    }
}