/* Light tema */
:root[data-bs-theme="light"]{
    --bg:#ffffff;
    --card-bg:#ffffff;
    --card-border:#e5e7eb;
    --card-header-bg:#ffffff;
    --card-title-color:#000000;
    --card-text-color:#000000;
    --card-header-color:#000000;

    --input-bg:#ffffff;
    --input-color:#000000;
    --input-border:#ced4da;

    --footer-border:#e5e7eb;

    --navbar-bg:#ffffff;
    --navbar-border:#e5e7eb;
    --navbar-link:#000000;
    --navbar-link-after:#0ea5e9;
    --navbar-link-hover:#0284c7;
    --navbar-link-active:#0284c7;

    --btn-primary:#0ea5e9;
    --btn-primary-hover:#0284c7;
    --btn-primary-border:#0ea5e9;

    --soft:#f8fafc;

    --swal-bg:#ffffff;
    --swal-soft:#f8fafc;
    --swal-soft-hover:#D7E2EE;
    --swal-border:#e5e7eb;
    --swal-title:#000000;
    --swal-text:#000000;
    --swal-share-link-bg:#ffffff;
    --swal-social-share-button:#f1f5f9;
    --swal-social-share-button-hover:#d0deeb;

    /* Swal buton */
    --swal-confirm-bg:#0ea5e9;
    --swal-confirm-bg-hover:#0284c7;
    --swal-confirm-color:#ffffff;
    --swal-confirm-border:#0ea5e9;
}

/* Dark tema */
:root[data-bs-theme="dark"]{
    --bg:#060E1B;
    --card-bg:#101b2c;
    --card-border:#1D293C;
    --card-header-bg:#101b2c;
    --card-title-color:#ffffff;
    --card-text-color:#ffffff;
    --card-header-color:#ffffff;

    --input-bg:#364357;
    --input-color:#ffffff;
    --input-border:#3a4a61;

    --footer-border:#1D293C;

    --navbar-bg:#060E1B;
    --navbar-border:#1D293C;
    --navbar-link:#ffffff;
    --navbar-link-after:#0284c7;
    --navbar-link-hover:#0369a1;
    --navbar-link-active:#0369a1;

    --btn-primary:#0284c7;
    --btn-primary-hover:#0369a1;
    --btn-primary-border:#0369a1;

    --soft:#0b1625;

    --swal-bg:#101b2c;
    --swal-soft:#2B4A78;
    --swal-soft-hover:#375F9A;
    --swal-border:#1D293C;
    --swal-title:#ffffff;
    --swal-text:#ffffff;
    --swal-share-link-bg:#364357;
    --swal-social-share-button:#1e293b;
    --swal-social-share-button-hover:#475569;

    /* Swal buton */
    --swal-confirm-bg:#0284c7;
    --swal-confirm-bg-hover:#0369a1;
    --swal-confirm-color:#ffffff;
    --swal-confirm-border:#0369a1;
}


body{
    background:var(--bg);
	font-family:"Roboto",sans-serif;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	overflow-x:hidden;
}

/* Logo light/dark */
[data-bs-theme="dark"] .logo-dark{display:inline-block}
[data-bs-theme="dark"] .logo-light{display:none}

[data-bs-theme="light"] .logo-dark{display:none}
[data-bs-theme="light"] .logo-light{display:inline-block}

main{flex:1}

/* Footer */

footer{
flex-shrink:0;
background:var(--bg);
border-top:1px solid var(--footer-border);
padding:20px 0;
font-size:14px;
}

.footer-section {
    background: var(--bg);
    border-top: 1px solid var(--footer-border);
    color: var(--input-color);
}

.footer-section a {
    color: var(--input-color);
    text-decoration: none;
}

.footer-section a:hover {
    color: var(--input-color);
    text-decoration: underline;
}

.footer-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-text {
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-list li {
    margin-bottom: 0.5rem;
}

/* Card */
.card{
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--card-text-color);
	border-style: solid;
	border-width: 1px;
	border-radius: 0;
}

/* Header */
.card-header{
    background: var(--card-header-bg);
    color: var(--card-header-color);
    border-bottom-color: var(--card-border);
	border-radius: 0 !important;
}

/* Body */
.card-body{
    color: var(--card-text-color);
}

/* Başlık */
.card-title{
    color: var(--card-title-color);
}

/* Code Editor */
.code-editor {
    background: var(--card-bg);
    border-color: var(--card-border);
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
}

input.form-control, textarea.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border: 1px solid var(--input-border) !important;
}

input.form-control:focus, textarea.form-control:focus {
    border-color: var(--input-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

select.form-select, textarea.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border: 1px solid var(--input-border) !important;
}

select.form-select:focus, textarea.form-control:focus {
    border-color: var(--input-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

select.form-select::-webkit-scrollbar {
    width: 8px;
}

select.form-select::-webkit-scrollbar-track {
    background: var(--input-bg);
}

select.form-select::-webkit-scrollbar-thumb {
    background: var(--input-border);
}

select.form-select::-webkit-scrollbar-thumb:hover {
    background: var(--input-color);
}

/* Navbar */
.navbar{
  background:var(--navbar-bg);
  border-bottom:1px solid var(--navbar-border);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  position:relative;
  z-index:10;
}

.navbar .nav-link{
  color:var(--navbar-link) !important;
  text-decoration:none !important;
  opacity:.85;
  font-weight:500;
  position:relative;
  padding:.5rem 0.75rem;
  transition:all .25s ease;
}

.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:2px;
  background:var(--navbar-link-after);
  transition:width .3s ease;
}

.navbar .nav-link:hover::after{
  width:100%;
}

.navbar .nav-link.active::after{
  width:100%;
  background:var(--navbar-link-active);
}

.navbar .nav-link:hover{
  color:var(--navbar-link-hover);
  opacity:1;
}

.navbar-toggler {
  border: none;
  padding: .25rem .5rem;
  transition: all .15s ease;
}

.navbar .auth-btn{
  width:120px;
  justify-content:center;
}

.navbar .dropdown-toggle::after{
  margin-left:.25rem;
  vertical-align:middle;
  transition:transform .2s ease;
}

.navbar .dropdown.show > .dropdown-toggle::after{
  transform:rotate(180deg);
}

.navbar .dropdown-menu{
  background:var(--navbar-bg);
  border:1px solid var(--navbar-border);
  border-radius:1px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  top: calc(100% + .50rem);
  padding:.1rem 0;
  min-width:200px;
}

.navbar .dropdown-item{
  color:var(--navbar-link);
  padding:.5rem 1rem;
  font-weight:500;
  transition:all .25s ease;
  text-decoration: none !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background:var(--soft);
  color:var(--navbar-link-hover);
}

.navbar .dropdown-divider{
  border-top:1px solid var(--navbar-border);
  margin:.1rem 0;
}

.navbar .user-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  transition:all .25s ease;
}

.navbar .user-avatar:hover{
  opacity:.9;
  transform:scale(1.05);
}

.navbar .user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

@media (max-width: 991.98px) {
  .navbar .dropdown-menu.navbar-user-menu {
    right: auto;
    left: 0;
    transform: none;
  }
}

.theme-toggle-btn{
  background:transparent;
  border:none;
  padding:6px;
  color:var(--input-color);
  display:flex;
  align-items:center;
  justify-content:center;
}

.theme-toggle-btn svg{
  width:20px;
  height:20px;
}

.theme-toggle-btn:hover{
  color:var(--btn-primary);
}

.theme-toggle-btn:focus{
  outline:none;
  box-shadow:none;
}

[data-bs-theme="light"] .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.btn-primary{
    background:var(--btn-primary);
    border-color:var(--btn-primary-border);
    color:#fff;
}

.btn-primary:hover{
    background:var(--btn-primary-hover);
    border-color:var(--btn-primary-hover);
    color:#fff;
}

.btn-primary:focus,
.btn-primary:active{
    background:var(--btn-primary-hover);
    border-color:var(--btn-primary-hover);
    box-shadow:none;
}

.btn-outline-primary{
    background:transparent;
    border-color:var(--btn-primary-border);
    color:var(--btn-primary);
}

.btn-outline-primary:hover{
    background:var(--btn-primary);
    border-color:var(--btn-primary);
    color:#fff;
}

.btn-outline-primary:focus,
.btn-outline-primary:active{
    background:var(--btn-primary-hover);
    border-color:var(--btn-primary-hover);
    color:#fff;
    box-shadow:none;
}

/* Hero */
.hero-code-preview .card-body {
  background: var(--card-bg);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color:  #6b7280;
  text-align: left;
  max-height: 200px;
  overflow: auto;
  display: flex;
}

.hero-code-lines {
  text-align: right;
  user-select: none;
  margin-right: 12px;
  color: #6b7280;
}

.hero-code-content {
  white-space: pre;
}

.hero-code-content .keyword { color: #f472b6; }
.hero-code-content .function { color: #60a5fa; }
.hero-code-content .string { color: #34d399; }

.hero-code-dots {
  display: flex;
  gap: 4px;
}

.hero-code-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4b5563;
}

.hero-code-dot:nth-child(1){ background:#f97316; }
.hero-code-dot:nth-child(2){ background:#06b6d4; }
.hero-code-dot:nth-child(3){ background:#3b82f6; }

.hero-line-wrapper {
  display: flex;
}

/* SWEETALERT */
.swal2-popup{
  font-family:"Roboto",sans-serif;
  background:var(--swal-bg);
  border-radius:1px;
  padding:1.5rem;
  box-shadow:0 6px 25px rgba(0,0,0,0.2);
  transition:all .25s ease;
}

.swal2-title{
  color:var(--swal-title);
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:.5rem;
}

.swal2-html-container,
.swal2-content{
  color:var(--swal-text);
  font-size:.95rem;
  line-height:1.6;
}

.swal-container.swal-share{
  max-width:420px;
  text-align:center;
  font-family:"Roboto",sans-serif;
}

.swal-share input.share-link{
  width:100%;
  padding:.4rem;
  margin-bottom:.5rem;
  border:1px solid var(--swal-border);
  border-radius:4px;
  text-align:center;
  background:var(--swal-share-link-bg);
  color:var(--swal-text);
  font-size:.9rem;
  box-sizing:border-box;
}

.share-buttons,
.swal-share .share-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  margin-bottom:.5rem;
}

.share-buttons a,
.swal-share .share-buttons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:6px;
  text-decoration:none;
  cursor:pointer;
  transition:all .2s ease;
  background:var(--swal-soft);
  border:1px solid var(--swal-border);
}

.share-buttons a:hover,
.swal-share .share-buttons a:hover{
  background:var(--swal-soft-hover);
}

.swal2-popup .swal2-confirm{
  background:var(--swal-confirm-bg) !important;
  color:var(--swal-confirm-color) !important;
  border:1px solid var(--swal-confirm-border) !important;
  border-radius:4px;
  padding:.45rem 1.1rem;
  font-weight:500;
  box-shadow:none;
  transition:background .2s ease,border-color .2s ease,transform .1s ease;
}

.swal2-popup .swal2-confirm:hover{
  background:var(--swal-confirm-bg-hover) !important;
  border-color:var(--swal-confirm-bg-hover) !important;
  transform:translateY(-1px);
}

.swal2-popup .swal2-confirm:focus{
  box-shadow:0 0 0 0.2rem rgba(14,165,233,0.45);
}