:root{
  --of-yesil:#1a7f37;
  --of-koyu:#0f1f14;
  --of-toprak:#8d6e63;
  --of-krem:#f5f1e8;
}
body{background:var(--of-krem);font-family:'Inter',system-ui,sans-serif;color:#222}
.of-home{display:grid;grid-template-columns:260px 1fr 300px;gap:24px;
  max-width:1400px;margin:24px auto;padding:0 16px}
.widget{background:#fff;border-radius:12px;padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:16px;
  border-top:3px solid var(--of-yesil)}
.widget h4{margin:0 0 12px;color:var(--of-yesil);font-size:14px;
  text-transform:uppercase;letter-spacing:.5px}
.featured{position:relative;display:block;border-radius:16px;
  overflow:hidden;margin-bottom:24px}
.featured img{width:100%;height:420px;object-fit:cover}
.featured .cat{position:absolute;top:16px;left:16px;color:#fff;
  padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700}
.featured h1{position:absolute;bottom:60px;left:20px;right:20px;
  color:#fff;font-size:32px;text-shadow:0 2px 8px #000}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid article{background:#fff;border-radius:12px;overflow:hidden;
  transition:transform .2s}
.grid article:hover{transform:translateY(-4px)}
.grid img{width:100%;height:160px;object-fit:cover}
.weather .temp{font-size:32px;font-weight:700;color:var(--of-yesil)}
@media(max-width:1024px){.of-home{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}}