/* Ana değişkenler */
:root {
--header-color: #333;
--accent-color: #d31401;
--border-radius: 4px;
--box-shadow: 0 2px 4px rgba(0,0,0,0.1);
--max-width: 1200px;
--spacing: 1rem;
--mobile-input-height: 45px;
--mobile-spacing: 0.75rem;
}

/* Temel stiller */
*, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;}

html, body {width: 100%;max-width: 100vw;overflow-x: hidden;}

body {
font-family: sans-serif;
line-height: 1.6;
background-color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
max-width: 100vw;
}

/* Header ve Navigasyon */
header {
background-color: var(--header-color);
color: #fff;
width: 100%;
}

.header-top {
padding: var(--spacing);
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
max-width: var(--max-width);
margin: 0 auto;
height: 70px;
}

.site-logo {font-size: 2rem; padding: 0.5rem 1rem; color: white;text-decoration: none;font-weight: bold;background-color: var(--accent-color);border-radius: var(--border-radius);
white-space: nowrap;height: 55px;display: flex;align-items: center;}

/* Arama formu */
.search-container {position: relative;flex-grow: 1;max-width: 600px;width: 100%;}

#search-form {display: flex;width: 100%;height: 54px;}

#search-input {padding: 0.8rem;border: 3px solid var(--accent-color);
border-right: none;border-radius: var(--border-radius) 0 0 var(--border-radius);font-size: 1rem;outline: none;flex: 1;min-width: 0;}

#search-form button {
width: 80px;
padding: 0 1.5rem;
border: 3px solid var(--accent-color);
background-color: var(--accent-color);
color: white;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
cursor: pointer;
font-weight: bold;
}
#search-suggestions {
position: absolute;
top: calc(100% + 1px);
left: 0;
right: 0;
background: white;
margin: 0;
padding: 0;
list-style: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}

#search-suggestions li {
border: 2px solid var(--accent-color);
border-top: none;
border-radius: 0 0 var(--border-radius) var(--border-radius);
padding: 0;margin: 0;}

#search-suggestions li:not(:last-child) {border-bottom: 1px solid #eee;}

#search-suggestions li a {
display: block;
padding: 0.8rem;
color: var(--header-color);
text-decoration: none;
}

#search-suggestions li a:hover {color: #fff;background-color: #d31401;}

.main-content {
background-color:#fbfbff;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}


/* Ana navigasyon */
nav {background-color: var(--accent-color);padding: 0.5rem 0;width: 100%;}

nav ul {
list-style: none;
display: flex;
justify-content: center;
max-width: var(--max-width);
margin: 0 auto;
padding: 0;
}

nav ul li {
margin: 0 5px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
border-radius: var(--border-radius);
transition: background-color 0.3s;
}

nav ul li a:hover {
background-color: #c0392b;
}

/* Ana içerik */
main {
flex: 1;
width: 100%;
}

/* Ana içerik düzeni */
.content-wrapper,
.page-container {
max-width: var(--max-width);
margin: 2rem auto;
padding: 0 var(--spacing);
display: grid;
grid-template-columns: 2fr 1fr; /* Ana içerik 2 birim, sidebar 1 birim */
gap: 2rem;
width: 100%;
}

/* Blog liste alanı */
.blog-list {width: 100%;}
.blog-list-title {color: var(--header-color);font-size: 2rem;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 2px solid var(--accent-color);text-align: center;}
.blog-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;width: 100%;}
/* Blok stili */


.block h2 {
color: var(--header-color);
font-size: 1.2rem;
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent-color);
text-align: center;
}

/* Liste stilleri */
.sidebar {display: flex;flex-direction: column;gap: 1.5rem;}
.sidebar-block {background: white;padding: 1.5rem;border-radius: var(--border-radius);box-shadow: var(--box-shadow);}
.block, .block-atc{
background-color: #fbfbff;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-bottom: 2rem;
width: 100%;
/* Adding subtle border to the block container */
border: 1px solid #e5e7eb;
word-break: break-word;
}

.block ul, .block-atc ul,
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.block li, .block-atc li, 
.sidebar li {
list-style: none;
background-color: #faf9ff;
padding: 12px;
margin: 8px 0;
text-align: center;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
/* Button-like appearance */
position: relative;
border: none;
/* Adding bottom and right borders for 3D effect */
border-bottom: 3px solid #858585;
border-right: 2px solid #858585;
/* Optional: Improve button press effect */
transform: translateY(0);
}

.block li a, .block-atc li a,
.sidebar li a {
color: #090763;
text-decoration: none;
font-size: 1.1rem;
display: block;
word-wrap: break-word;
/* Better text alignment for button-like appearance */
line-height: 1.5;
font-weight: 500;
}

.block li:hover, 
.sidebar li:hover {
background-color: #11407b;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
/* Adjust borders on hover for better visual feedback */
border-bottom: 3px solid #11407b;
border-right: 2px solid #11407b;
}

.block li:active,
.sidebar li:active {
/* Button press effect */
transform: translateY(2px);
border-bottom: 1px solid #092a52;
border-right: 1px solid #092a52;
}

.block li:hover a, 
.sidebar li:hover a {
color: white;
}
/* İlaç detay sayfası */
.drug-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.drug-details h1 {
color: var(--header-color);
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
border-bottom: 2px solid var(--accent-color);
}

.drug-info-item {
border-bottom: 3px solid #858585;
border-right: 2px solid #858585;
display: flex;
align-items: center;
padding: 1rem;
background: #f8f9fa;
border-radius: var(--border-radius);
}

.drug-info-label {
font-weight: bold;
min-width: 150px;
}

.drug-info-value a {
color: var(--accent-color);
text-decoration: none;
}

.drug-info-value a:hover {
text-decoration: underline;
}


.drug-actions {
display: flex;
gap: 1rem;
}

.drug-actions a {
padding: 0.8rem 1.5rem;
background: var(--accent-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
transition: background-color 0.3s;
}

.drug-actions a:hover {
background-color: #c0392b;
}

/* Blog listesi */
.blog-list-title {
color: var(--header-color);
font-size: 2rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--accent-color);
text-align: center;
}

.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.blog-card {
background: #fff;
border-radius: var(--border-radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}

.blog-card:hover {transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.blog-card-image {width: 100%;height: 310px;overflow: hidden;}
.blog-card-image img {width: 100%;height: 100%;object-fit: contain;transition: transform 0.3s ease;}
.blog-card:hover .blog-card-image img {transform: scale(1.05);}
.blog-card-content {padding: 1.5rem;}
.blog-card-title {margin: 0 0 1rem 0;font-size: 1.25rem;line-height: 1.4;}
.blog-card-title a {color: var(--header-color);text-decoration: none;transition: color 0.3s ease;}
.blog-card-title a:hover {color: var(--accent-color);}
.blog-card-excerpt {color: #666;margin-bottom: 1rem;line-height: 1.6;font-size: 0.95rem;}
.blog-card-meta {display: flex;justify-content: space-between;color: #353535;font-size: 0.9rem;}
.blog-card-meta span {display: flex;align-items: center;gap: 0.5rem;}
.read-more {display: inline-block;padding: 0.5rem 1rem;background-color: var(--accent-color);color: white;text-decoration: none;border-radius: var(--border-radius);transition: background-color 0.3s ease;}
.read-more:hover {background-color: #c0392b;}

/* Blog detay sayfası */
.blog-detail {background: #fbfbff;border-radius: var(--border-radius);box-shadow: var(--box-shadow);padding: 2.5rem;margin-bottom: 2rem;}
.blog-detail-header {margin-bottom: 2rem;padding-bottom: 1.5rem;border-bottom: 1px solid #eee;}
.blog-detail-title {color: var(--header-color);font-size: 2.5rem;line-height: 1.3;margin: 0 0 1rem 0;}
.blog-detail-meta {display: flex;gap: 1.5rem;color: #666;font-size: 0.95rem;}
.meta-item {display: flex;align-items: center;gap: 0.5rem;}
.meta-item svg {color: var(--accent-color);}
.blog-detail-image {margin: -2.5rem -2.5rem 2rem -2.5rem;height: 400px;overflow: hidden;}
.blog-detail-image img {width: 100%;height: 100%;object-fit: contain;}
.blog-detail-content {font-size: 1.1rem;line-height: 1.8;color: #333;}
.blog-detail-content p {margin-bottom: 1.5rem;}
.blog-detail-footer {margin-top: 3rem;padding-top: 2rem;border-top: 1px solid #eee;}
.blog-navigation {display: flex; justify-content: space-between; gap: 1rem;}
.nav-link {display: flex;align-items: center;gap: 0.5rem;padding: 0.8rem 1.2rem;background-color: #f5f5f5;color: var(--header-color);text-decoration: none;border-radius: var(--border-radius);transition: all 0.3s ease;}
.nav-link:hover {background-color: var(--accent-color);color: white;}
.next-link {margin-left: auto;}

/* Footer */
footer {background-color: var(--header-color);color: #fff;text-align: center;padding: 1rem;margin-top: 25px;border-top: 15px solid var(--accent-color);width: 100%;}
footer p {margin: 0;padding: 0;max-width: var(--max-width);margin: 0 auto;}
footer a {color: #fff;} /* Blog kartları için ana grid düzeni */
@media (min-width: 769px) {.blog-grid {grid-template-columns: repeat(2, 1fr); /* Masaüstünde 2 kolon */ }
.drug-details{padding:15px;} }

/* Mobil düzen */
@media (max-width: 768px) {
body {width: 100%;max-width: 100vw;overflow-x: hidden;}
.header-top {flex-direction: column;height: auto;padding: 0;gap: var(--mobile-spacing);max-width: 100%;}
.site-logo {width: 100%;height: auto;justify-content: center;padding: 0;font-size: 1.5rem;max-width: 100%;}
.search-container {width: 100%;max-width: 100%;}
#search-form {height: var(--mobile-input-height);width: 100%;max-width: 100%;}
#search-input {border-width: 2px;font-size: 0.95rem;width: 100%;max-width: 100%;}
#search-form button {width: 60px;min-width: 60px;padding: 0;border-width: 2px;}
nav ul {flex-direction: column;padding: 0;width: 100%;max-width: 100%;}
nav ul li {width: 100%;margin: 0.25rem 0;text-align: center;}
.content-wrapper, .page-container {
grid-template-columns: 1fr; /* Tablet/mobilde tek kolon */
padding: 0;margin: 0;max-width: 100%;width: 100%;}
.block {padding: 0;margin: 0;max-width: 100%;width: 100%;margin-top:5px}
.blog-grid {grid-template-columns: 1fr;max-width: 100%;}
.blog-card-meta {flex-direction: column;gap: 0.5rem;max-width: 100%;}
.drug-info-item {flex-direction: column;align-items: flex-start;max-width: 100%;}
.drug-info-label {margin-bottom: 0.5rem;}
.drug-actions {flex-direction: column;max-width: 100%;}
.main-content {
background:#fbfbff;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
max-width: 100%;
width: 100%;
}
.blog-grid {grid-template-columns: 1fr;gap: 1.5rem;max-width: 100%;}
.blog-list-title {font-size: 1.75rem;margin-bottom: 1.5rem;}
}

/* Ekstra küçük ekranlar */
@media (max-width: 480px) {
body {max-width: 100vw;overflow-x: hidden;}
.content-wrapper, .page-container {padding: 0;margin: 0;max-width: 100%;width: 100%;}
.sidebar-block,
.block {padding: 0;max-width: 100%;width: 100%;margin-top:5px;}
.blog-list-title {font-size: 1.5rem;margin-bottom: 1rem;}
.blog-grid {gap: 1rem;max-width: 100%;}
.block {padding: 0;max-width: 100%;width: 100%;}
.block li,
.sidebar li {padding: 0;margin: 0;list-style: none;max-width: 100%;word-wrap: break-word;}
.site-logo {font-size: 1.25rem;}
#search-form button {width: 50px;min-width: 50px;}

.blog-card-image {height: 280px;}
.blog-detail {padding: 0;}
.blog-detail-title {font-size: 1.8rem;}
.blog-detail-meta {flex-direction: column;gap: 0.75rem;}
.blog-detail-image {height: 250px;margin: -1.5rem -1.5rem 1.5rem -1.5rem;}
.blog-navigation {flex-direction: column;}
.nav-link {width: 100%;justify-content: center;}}

.pagination {margin: 20px 0;text-align: center;}
.page-link {display: inline-block;padding: 8px 12px;margin: 0 4px;border: 1px solid #ddd;border-radius: 4px;text-decoration: none;color: #333;}
.page-link:hover {background-color: #f5f5f5;}
.page-link.active {background-color: #007bff;color: white;border-color: #007bff;}

.blog-card {position: relative;}

.blog-card-image {position: relative;}

.blog-card-image img {
width: 100%;
display: block;
}

.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3); /* Yarı saydam siyah arkaplan */
color: white;
padding: 20px;
}

.blog-card-title {
margin: 0;
color: white;
font-size: 12pt;
line-height: 1.3;
text-align: left;
}

.blog-card-title a {
color: white;
text-decoration: none;
}

.blog-card-meta {
padding: 3px;
background: #f5f5f5;
display: flex;
justify-content: space-between;
}
.ilac-uyari-kutusu {
background-color: #f9f9f9;
border-left: 5px solid #d9534f; 
padding: 15px;
margin-top: 30px;
margin-bottom: 20px;
border-radius: 4px;
font-size: 14px;
line-height: 1.6;
color: #222;
font-style: italic;
}
.ilac-uyari-kutusu strong {color: #cb0600;}