:root{
  --pale:#fbf7f2;      /* arka plan */
  --light:#f3e8d8;     /* açık arka plan */
  --mid:#0b2845;       /* ön plan (primary) */
  --dark:#1f2c3a;      /* ara/koyu ton */
  --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}

.hero{height:100vh;width:100%;position:relative;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;transition:background-image 1s ease-in-out}
.hero-overlay{text-align:center;color:var(--dark);background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.0));padding:2rem;backdrop-filter: blur(4px)}
.welcome{margin:0;font-size:clamp(2.5rem,6vw,6rem);letter-spacing:8px;color:#fff;text-shadow:0 6px 20px rgba(0,0,0,0.45)}
.sub{color:var(--light);margin:0.5rem 0 1rem;font-size:1.1rem}
.show-products{display:inline-block;padding:0.6rem 1rem;border-radius:999px;background:var(--mid);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,0.25)}

main{background:linear-gradient(180deg, var(--pale) 0%, var(--pale) 100%);padding:3rem 1rem}
.products{max-width:1200px;margin:0 auto}
.products h2{color:var(--dark);margin:0 0 1rem;font-size:1.6rem}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.product{background:#fff;border-radius:12px;padding:1rem;box-shadow:0 8px 30px rgba(0,0,0,0.08);cursor:pointer;overflow:hidden;display:flex;flex-direction:column}
.product img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.product:focus{outline:3px solid rgba(11,40,69,0.12);outline-offset:4px}
.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.12)}
.product .title{font-weight:700;color:var(--dark);margin:0}
.product:hover img{transform:scale(1.03)}
.product .price{color:var(--mid);font-weight:600}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:1000}
.modal[aria-hidden="false"]{display:flex}
.modal{padding:1rem}
.modal-content{background:linear-gradient(180deg,#fff,#fff);padding:1rem;border-radius:12px;max-width:900px;width:94%;max-height:90vh;overflow:auto;position:relative;transform:translateY(10px);opacity:0;transition:transform 320ms ease,opacity 320ms ease}
.modal[aria-hidden="false"] .modal-content{transform:none;opacity:1}
.modal .gallery{display:flex;align-items:center;justify-content:center}
:focus-visible{outline:3px solid rgba(11,40,69,0.14);outline-offset:3px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}:root{data-reduced-motion:true}}
@media (max-width:600px){.product img{height:160px}.hero-overlay{padding:1rem}.sub{font-size:0.95rem}}
.modal .close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:1.3rem;cursor:pointer}