*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;color:#222;line-height:1.7}
.container{width:min(1100px,92%);margin:auto}
.header{background:white;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:10}
.nav{min-height:65px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:25px;font-weight:bold;color:#111;text-decoration:none}
nav{display:flex;gap:25px}
nav a{color:#333;text-decoration:none;font-weight:500}
nav a:hover{color:#06f}
.hero{background:#111;color:white;padding:90px 0;text-align:center}
.hero h1{font-size:clamp(40px,7vw,70px);margin:0 0 15px}
.hero p{font-size:19px;max-width:650px;margin:auto;opacity:.85}
.articles-section{padding:60px 0}
.articles-section h2{font-size:32px;margin-bottom:30px}
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.card{background:white;border-radius:12px;overflow:hidden;border:1px solid #ddd;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card img{width:100%;height:200px;object-fit:cover}
.card-content{padding:22px}
.card h3{margin-top:0;font-size:23px}
.card p{color:#666}
.read-more{display:inline-block;margin-top:10px;color:#06f;text-decoration:none;font-weight:bold}
.article-page{max-width:850px;padding-top:60px;padding-bottom:80px}
.article-page h1{font-size:clamp(35px,6vw,55px);line-height:1.2;margin-bottom:10px}
.article-meta{color:#777;margin-bottom:30px}
.article-image{width:100%;max-height:500px;object-fit:cover;border-radius:12px;margin-bottom:35px}
.article-content{background:white;padding:35px;border-radius:12px;font-size:18px}
.article-content h2{margin-top:35px}
.article-content img{max-width:100%;border-radius:10px}
footer{background:#111;color:white;padding:30px 0;margin-top:50px}
.admin{max-width:850px;margin:50px auto}
.admin-box{background:white;padding:30px;border-radius:12px;border:1px solid #ddd}
input,textarea,select{width:100%;padding:13px;margin-top:7px;margin-bottom:20px;border:1px solid #ccc;border-radius:7px;font-size:16px}
textarea{min-height:350px;resize:vertical}
button{border:none;padding:13px 22px;border-radius:7px;background:#06f;color:white;font-size:16px;cursor:pointer}
button:hover{background:#05c}
button:disabled{opacity:.5;cursor:not-allowed}
.status{margin-top:20px;padding:15px;border-radius:7px;background:#f1f1f1}
.hidden{display:none}
@media(max-width:600px){nav{gap:12px;font-size:14px}.article-content{padding:20px}}