@charset "utf-8";
html, body, div, span, iframe, h1, h2, h3, img, table, tr, td {margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;font-style:inherit;font-family:inherit;vertical-align:baseline}
:root{
  --border:#d1d5db;
  --hover:#f3f4f6;
  --primary:#2563eb;
  --focus:rgba(37,99,235,0.15);
}
html{overflow-y: scroll}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:#111;background:#f6f7fb;font-size:16px;line-height:1.7;}
a:link{color:#003897;text-decoration:none}
a:hover{color:#003897;text-decoration:underline}
a:visited{color:#003897}
a:active{color:#003897}
#site{margin:auto;max-width:1000px;padding:0px 5px 0px 5px;}
header {
    max-width: 1000px;
    margin: auto;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

	background:#f6f7fb;
    border-bottom: 1px solid #000;

    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 5px;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
header a:link{padding:0 5px 0 5px;line-height:26px;}
h1{font-size:20px;line-height:30px;color:#502;font-weight:bold;padding:60px 0px 10px 0px;}
h2{clear:both;font-size:19px;line-height:28px;color:#300;font-weight:bold;padding:10px 0 10px 0;}
h3{font-size:16px;line-height:26px;font-weight:bold;}
#f{float:right;margin:0px 4px 0px 5px;}
#i{width:100px;line-height:16px;height:16px;padding:0;margin:2px 0 0 0;}
.l{float:left;}
.r{float:right;}
#share{padding:10px 0px 0px 0px;}
#fb_share{float:left;width:120px;}
#tw_share{float:left;width:120px;margin-top:4px;}
footer {max-width:1000px;text-align:center;border-top:1px solid #CCC;padding:10px 0;}
ul{margin:0px 0px 10px 0px;}
@media only screen and (max-width:450px)
{
	#top{height:48px;}
	#f{clear:both;}
	h1{padding-top:55px;}
	
	.search-box{
		border-radius:10px;
	}

	.search-box #i{
		width: 120px !important;
		max-width: 120px !important;
	}

	.search-box button{
		padding:6px 10px; /* input ile uyumlu */
		font-size:13px;
	}
}

.list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
  margin: 0 0 10px 0;
}

.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.card h3{
  font-size:17px;
  margin:0 0 10px;
  color:#111827;
  line-height:1.4;
}

.card .desc{
  font-size:15px;
  color:#4b5563;
  line-height:1.6;
  margin-bottom:10px;
}

.card .desc p{
  margin:0 0 6px;
}

.card a{
  display:inline-block;
  font-size:14px;
  color:#2563eb;
  font-weight:600;
  text-decoration:none;
  padding:6px 0;
}

.card a:hover{
  text-decoration:underline;
}

.search-form{
  display:flex;
  justify-content:flex-end;
  flex:1;
}

.search-box{
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition:.2s ease;
  max-width:240px;
}

.search-box:focus-within{
  border-color:var(--primary);
  box-shadow: 0 0 0 3px var(--focus);
}

#i{
  flex:1;
  width:auto;
  min-width:100px;
  border:0;
  outline:none;
  padding:8px 10px;
  width:180px;
  font-size:14px;
}

.search-box button{
  border:0;
  background:#e5e7eb;
  color:#111827;
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
  transition:.2s ease;
}

.search-box button:hover{
  background:#d1d5db;
}

/* SUGGEST BOX */
#suggest-box{
  position:absolute;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  overflow:hidden;
  z-index:9999;
}

#suggest-box div{
  padding:10px 12px;
  cursor:pointer;
  font-size:14px;
  transition: background .15s ease;
}

#suggest-box div:hover{
  background:var(--hover);
}