/* Sidebar */
	.sidebar {
		
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	/* Filter boxes */
	.filter-box {
		background: #fff;
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		transition: 0.2s;
	}

	.filter-box:hover {
		box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	}

	.filter-box h3 {
		margin: 0 0 10px;
		font-size: 15px;
		color: #333;
	}

	.filter-box label {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 6px 0;
		font-size: 14px;
		cursor: pointer;
		color: #555;
	}

	.filter-box label:hover {
		color: #e60023;
	}

	.filter-box select {
		width: 100%;
		padding: 8px;
		border-radius: 8px;
		border: 1px solid #ddd;
		background: #fafafa;
	}

	.filter-box button {
		width: 100%;
		margin-top: 10px;
		padding: 8px;
		border: none;
		border-radius: 8px;
		background: #f1f1f1;
		cursor: pointer;
	}

	.filter-box button:hover {
		background: #e60023;
		color: white;
	}

	/* Content */
	.content {
		flex: 1;  background: #fff; padding:30px; border-radius:10px
	}

	/* Top bar */
	.topbar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.view-toggle button {
		padding: 8px 12px;
		border: none;
		cursor: pointer;
		border-radius: 6px;
	}
 

	
	.card {
		background: #fff;
		border-radius: 12px;
		padding: 15px;
		height:222px;
		margin-bottom:20px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}

	.card-header {
		font-weight: bold;
		color: #e60023;
		margin-bottom: 10px;
	}

	.card-title {
		font-size: 14px;
		margin-bottom: 15px;
	}

	.buttons {
		display: flex;
		gap: 10px;
	}

	.btn {
		flex: 1;
		padding: 8px;
		border-radius: 20px;
		border: none;
		cursor: pointer;
	}

	.btn-download {
		background: #e60023;
		color: white;
	}

	.btn-preview {
		background: #eee;
	}
	
	.search-box {
		  position: relative;
		  width: 340px; /* İstersen genişliği ayarla */
		  max-width: 100%;
		}

		.search-box input[type="search"] {
		  width: 100%;
		  padding: 8px 40px 6px 45px; /* Sağda ikona yer bıraktık */
		  border: 1px solid #ccc;
		  border-radius: 25px;
		  font-size: 15px;
		  outline: none;
		  height:40px;
		  box-shadow: 0 2px 5px rgb(0 0 0 / 0.1);
		  transition: border-color 0.3s ease;
		}

		.search-box input[type="search"]:focus {
		  border-color: #0078d4; /* Mavi veya istediğin renk */
		  box-shadow: 0 2px 8px rgb(0 120 212 / 0.4);
		}

		.search-box svg {
		  position: absolute;
		  left: 16px;
		  top: 52%;
		  transform: translateY(-50%);
		  width: 22px;
		  height: 22px;
		  fill: #888;
		  pointer-events: none; /* İkonun tıklanmasını engelle */
		}


		#pagination button { margin: 2px; padding: 5px 10px; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; background: #fff; }
		#pagination button.active { background: #007BFF; color: #fff; border-color: #007BFF; }
		#selectedFilters { margin-bottom: 10px; }
		.filter-tag { display: inline-block; background: #007BFF; color: #fff; padding: 2px 6px; border-radius: 4px; margin-right: 5px; font-size: 12px; }
		#loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); justify-content: center; align-items: center; font-size: 20px; z-index: 9999; }
		
	
	
	
	

	.content-list { 
		margin: 0 auto;
	}
	
	.content-item {
		padding: 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    transition: background 0.2s;
	}

	.content-item:nth-child(odd) {
		background-color: transparent; /* boş */
	}

	.content-item:nth-child(even) {
		background-color: #f9f9f9; /* açık arkaplan */
	}


	.content-item:hover {
		background-color: #f3f3f3;
	}

  .content-item {
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 15px;
   /*  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1); */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
	border:1px solid #f2f2f2
  }

  .content-info {
    flex: 1 1 60%;
    min-width: 280px;
  }

  .title {
	display:block; margin-top:15px; font-weight:500
  }
 .tags {
    margin-bottom: 6px;
  }

  .tag {
    display: inline-block;
    background: #e4e7eb;
    color: #5a6772;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 12px;
    margin-right: 8px;
    user-select: none;
  }

  .tag.year {
    background: #f9d6d5;
    color: #a94442;
  }


  .actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .actions button {
	  float:right;
    border: 1px solid #ccc;
    background: white;
    color: #444;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }

  .actions button:hover {
    background: #f0f0f0;
  }

  .btn-download {
    background: #d81e1e;
    border-color: #d81e1e;
    color: white;
    font-weight: 600;
  }

  .btn-download:hover {
    background: #b01717;
    border-color: #b01717;
  }