@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Quicksand:wght@500&display=swap');

		.lingua-header {
			background: linear-gradient(to right, #497979, #3e6666);
			color: white;
			box-shadow: 0 4px 12px rgba(0,0,0,0.2);
		}

		.lingua-title {
			font-family: 'Orbitron', sans-serif;
			font-size: 48px;
			letter-spacing: 2px;
			margin: 0;
			text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
			color: #ffffff;
		}

		.lingua-title span {
			color: #d4ffeb;
			font-family: 'Quicksand', sans-serif;
			font-weight: bold;
		}


		.word-box h1 {
			cursor: pointer;
			user-select: none;
		}
		.translation {
			display: none;
			font-size: 24px;
			color: green;
			margin-top: 20px;
		}
		.delete-form {
			margin: 0;
		}
		.delete-btn {
			display: none;
			font-size: 12px;
			background-color: transparent;
			border: none;
			color: #999;
			cursor: pointer;
		}
		 
		.scrollable-panel {
			height: 400px;
			overflow-y: auto;
		}
		.delete-btn {
			display: none;
		}
		.admin-mode .delete-btn{
			display: inline-block !important;
		}
		.clickable-word {
			cursor: pointer;
			font-weight: 500;
		}
		.clickable-word:hover {
			color: #497979;
		}
.lingua-header {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}


.lingua-header .btn {
  border-color: #ffffff;
  color: #ffffff;
}

.lingua-header .btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
}

.lingua-header .btn span.me-2 {
  font-size: 1.5rem; 
}

@media (max-width: 768px) {
	 .container .row > div {
    margin-bottom: 1rem;
  }
	.lingua-title {
    font-size: 18px !important; 
  }
  .lingua-header .btn span.d-none.d-md-inline {
    display: none !important;
  }
  
  .lingua-header .btn .bi {
    font-size: 1.2rem !important;
  }

  .lingua-header .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
}

ul.nav.nav-tabs > li > .nav-link {
  color: #467373 !important;
  border-color: transparent !important;
}

ul.nav.nav-tabs > li > .nav-link.active {
  color: #fff !important;
  background-color: #467373 !important;
  border-color: #467373 !important;
}

#iframe2 {
  border: none;
  height: 750px;
}

@media (min-width: 992px) { 
  #iframe2 {
    height: 570px;
  }
}

.paragraph-item {
    transition: all 0.2s ease;
    cursor: pointer;
}

.paragraph-item:hover {
    background-color: #f8f9fa;
    border-color: #007bff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.clickable-paragraph {
    cursor: pointer;
}

.paragraph-text {
    transition: all 0.3s ease;
}

.scrollable-panel {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.scrollable-panel::-webkit-scrollbar {
    width: 6px;
}

.scrollable-panel::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-panel::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.scrollable-panel::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

.badge-sm {
    font-size: 0.7em;
}

.col-lg-8 .p-4 {
    max-height: 600px;
    overflow-y: auto;
}

.paragraph-content-container {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Scroll bar'ı güzelleştir */
.paragraph-content-container::-webkit-scrollbar {
    width: 6px;
}

.paragraph-content-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.paragraph-content-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.paragraph-content-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}