:root{ --bg:#0f1226; --card:#171a36; --accent:#ff6ac1; --accent-2:#6ad7ff; --text:#e9ecff; --muted:#9aa3c7 }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:radial-gradient(1200px 600px at 15% -10%, #1b1f46 0%, #0f1226 45%, #0b0e1f 100%);}    
a{color:var(--accent)}

/* Header - Mobil Uyumlu */
header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(15,18,38,.85), rgba(15,18,38,.55)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{max-width:980px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; flex-wrap:wrap; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.logo{width:30px; height:30px; background:conic-gradient(from 0deg, var(--accent), #ffd1f0, var(--accent-2), #a4ffea, var(--accent)); border-radius:8px; flex-shrink:0}
nav ul{display:flex; gap:16px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
nav a{color:var(--text); font-weight:600; padding:8px 12px; border-radius:10px}
nav a:hover{background:rgba(255,255,255,.06)}

/* Main Content */
main{max-width:980px; margin:24px auto 70px; padding:0 20px}
.grid{display:grid; grid-template-columns:1fr; gap:18px}
.card{background:linear-gradient(180deg, rgba(23,26,54,.85), rgba(23,26,54,.55)); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:22px}
h1{font-size:28px; margin:0 0 6px}
.meta{color:var(--muted); margin-bottom:18px; font-size:14px}
h2{margin-top:16px; margin-bottom:8px; font-size:18px}
p, ul, li{color:#dfe3ff; line-height:1.6}
ul{padding-left:20px}
li{margin-bottom:4px}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:linear-gradient(180deg, #2a2f69, #1e2351); border:1px solid rgba(255,255,255,.1); color:var(--text); font-weight:700; cursor:pointer; text-decoration:none; font-size:14px}
.btn:hover{filter:brightness(1.1); transform:translateY(-1px)}
.btn-accent{background:linear-gradient(180deg, var(--accent), #ff3fae)}

/* Map */
.map-wrap{position:relative; width:100%; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.map-inner{position:relative; padding-bottom:56%; height:0}
.map-inner iframe{position:absolute; left:0; top:0; width:100%; height:100%; border:0}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.06); background:rgba(15,18,38,.7);}
.footer{max-width:980px; margin:0 auto; padding:18px 20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.footer a{color:#cbd3ff}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:rgba(255,255,255,.08); padding:1px 6px; border-radius:6px}

/* Responsive Design */

/* Tablet */
@media (min-width: 768px) {
  .grid{grid-template-columns:1fr 1.2fr}
  h1{font-size:34px}
  h2{font-size:20px}
  .meta{font-size:15px}
}

/* Mobile */
@media (max-width: 767px) {
  .nav{padding:12px 16px}
  .brand{font-size:16px}
  .logo{width:28px; height:28px}
  nav ul{gap:8px}
  nav a{padding:6px 10px; font-size:14px}
  
  main{padding:0 16px; margin:20px auto 50px}
  .card{padding:18px}
  h1{font-size:24px; line-height:1.3}
  h2{font-size:16px; margin-top:14px}
  .meta{font-size:13px}
  p, ul, li{font-size:14px}
  
  .row{gap:8px}
  .btn{padding:8px 12px; font-size:13px}
  
  .map-inner{padding-bottom:60%}
  
  .footer{padding:16px; flex-direction:column; text-align:center}
  .footer > div{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
}

/* Extra small screens */
@media (max-width: 480px) {
  .nav{padding:10px 12px}
  main{padding:0 12px}
  .card{padding:16px}
  h1{font-size:22px}
  .btn{width:100%; justify-content:center; margin-bottom:8px}
  .row{flex-direction:column}
}

/* Cookie Banner */
.cookie-banner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(23,26,54,.98), rgba(23,26,54,.92));
  color: #e9ecff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  backdrop-filter: saturate(140%) blur(6px);
}

.cookie-banner strong{
  display: block;
  font-size: 15px;
  letter-spacing: .01em;
  margin-bottom: 4px;
}

.cookie-banner .note{
  color: #b9c1e6;
  font-size: 14px;
  margin: 6px 0 0;
}

.cookie-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

/* Buttons (scoped to banner) */
.cookie-banner .btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #2a2f69, #1e2351);
  color: #e9ecff;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}

.cookie-banner .btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.cookie-banner .btn-primary{
  background: linear-gradient(180deg, #ff6ac1, #ff3fae);
  border-color: transparent;
}

/* Link */
.cookie-banner a{
  color: #cbd3ff;
  text-decoration: none;
  font-weight: 600;
}

.cookie-banner a:hover{
  text-decoration: underline;
}

/* Responsive Cookie Banner */
@media (max-width: 520px){
  .cookie-banner{ left: 8px; right: 8px; bottom: 8px; padding: 12px; }
  .cookie-actions{ gap: 8px; }
  .cookie-banner .btn{ width: 100%; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cookie-banner .btn{ transition: none; }
  .cookie-banner .btn:hover{ transform: none; }
  .btn{ transition: none; }
  .btn:hover{ transform: none; }
}