:root{font-family:Arial,sans-serif;color:#162225;background:#f7f7f3;--green:#11342d;--mint:#c7f36c;--border:#dce2d9}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #528315;outline-offset:3px}
.skip{position:absolute;top:0;left:12px;transform:translateY(-110%);background:white;padding:10px;z-index:3}
.skip:focus{transform:none}
img{max-width:100%;display:block}
.wrap{width:min(92%,1210px);margin:auto}
.top{background:#112722;color:#e9f3e9;font-size:13px}
.top .wrap,.head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 0}
header{background:#fff;border-bottom:1px solid var(--border)}
.head{min-height:78px}
.brand img{width:178px;max-height:62px;object-fit:contain;object-position:left}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:22px;font-weight:700;font-size:14px}
nav [aria-current=page]{border-bottom:2px solid #497421;padding-block:7px}
.button{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:#15251a;padding:12px 17px;border-radius:5px;font-size:14px;font-weight:700}
.button:hover{filter:brightness(.94)}
.outline{background:transparent;color:inherit;border:1px solid currentColor}
.whatsapp svg{width:17px;height:17px;fill:currentColor}
.hero,.intro{background:var(--green);color:#fff}
.hero .wrap{display:grid;grid-template-columns:1fr .85fr;gap:36px;align-items:center;padding:clamp(24px,4vw,58px) 0}
.hero img{width:100%;height:clamp(220px,32vw,425px);object-fit:cover;border-radius:8px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(32px,5vw,65px);letter-spacing:-.04em;line-height:1.06}
p{line-height:1.55}
.hero p,.intro p{margin-top:14px;color:#e4eee3;font-size:17px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px}
.intro{padding:clamp(29px,5vw,68px) 0}
.section{padding:clamp(25px,4vw,52px) 0}
.section+.section{border-top:1px solid var(--border)}
h2{font-size:clamp(24px,3vw,37px);margin-bottom:12px;color:var(--green)}
h3{font-size:18px;margin-bottom:7px}
.categories,.products{display:grid;gap:13px;margin-top:17px;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.category,.product,.details,.contact-cta{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.category:hover{border-color:#719745}
.category img,.product img{width:100%;height:170px;object-fit:contain;background:#fff;padding:9px}
.category>div,.product>div,.contact-cta{padding:15px}
.category span,.product>div>a{display:inline-block;color:#345920;font-weight:700;margin-top:10px;font-size:14px}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.filter a{background:white;border:1px solid var(--border);padding:9px 12px;border-radius:5px;font-weight:700;font-size:14px}
.prose{max-width:720px}.prose p+p{margin-top:12px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.details{margin:0;padding:0 15px}.details>div{padding:13px 0}.details>div+div{border-top:1px solid var(--border)}
dt{font-weight:700;margin-bottom:5px}dd{margin:0}
footer{background:#112722;color:#fff;padding:25px 0}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}footer .wrap>div:last-child{display:grid;gap:8px}
@media(max-width:650px){.head{flex-wrap:wrap;gap:8px}.head nav{order:3;width:100%;gap:14px}.brand img{width:145px}.hero .wrap,.contact{grid-template-columns:1fr}.hero .wrap{gap:18px}.hero img{height:220px}}

/* Gül Hırdavat approved color palette and page layouts */
:root{color:#222326;background:#f8f4ee;--green:#292a2b;--mint:#a72025;--border:#ded7ce;--gold:#bf9039}
header{background:#faf6f0}.top,footer{background:#292a2b}
.top .wrap{justify-content:flex-end;gap:20px}
.top .location{color:#fff}
.top .location::before{content:"◆";color:#d3a550;margin-right:8px}
.social{display:flex;gap:12px;margin-right:auto;align-items:center}
.social-mark{display:grid;place-items:center;width:25px;height:25px;color:white;border-radius:50%}
.social-mark svg{width:15px;height:15px;fill:currentColor}
.instagram{border-radius:6px;background:linear-gradient(35deg,#fac852,#df246e 50%,#5739cc)}
.facebook{background:#1877f2}.social-mark.whatsapp{background:#128734}.pinterest{background:#bd081c}.twitter{color:#1da1f2;background:transparent}.twitter svg{width:20px;height:20px}
.head{min-height:108px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:82px;height:91px;max-height:none;object-fit:contain}
.brand strong{border-left:1px solid #cfc5ba;padding-left:13px;font-size:clamp(18px,2.7vw,34px);letter-spacing:-.035em}
nav [aria-current=page]{border-color:#a72025}
.button{color:#fff;background:#a72025}.button.outline{background:transparent;color:inherit}.button.whatsapp{background:#09851e}
.head .whatsapp{padding:9px;border-radius:9px}.head .whatsapp svg{width:22px;height:22px}
.hero{position:relative;isolation:isolate;background:#252627;overflow:hidden}
.hero .wrap{display:flex;align-items:center;min-height:clamp(420px,49vw,630px);padding:34px 0}
.hero .wrap>div{z-index:1;width:52%}
.hero img{position:absolute;z-index:-2;inset:0 0 0 auto;width:60%;height:100%;border-radius:0;object-position:right center}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#232426 0%,#232426 35%,#23242688 48%,transparent 65%)}
.hero h1{font-size:clamp(32px,4.6vw,67px)}
.hero h1::after,.about-page h1::after,.contact-page h1::after{content:"";display:block;width:61px;height:4px;margin-top:17px;background:var(--gold)}
.hero p{max-width:400px;color:#fff}
.categories{grid-template-columns:repeat(5,minmax(0,1fr))}
.category{box-shadow:0 3px 10px #2c241109;border-color:#e9e1d8}
.category img{height:auto;aspect-ratio:1 / 1.07;object-fit:cover;padding:0}
.category>div{text-align:center;padding:15px 6px}.category h3{margin:0;font-size:clamp(14px,1.75vw,22px)}
.category-section h2,.intro h1{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,30px);text-align:center}
.category-section h2::before,.category-section h2::after,.intro h1::before,.intro h1::after{content:"";width:clamp(28px,15vw,160px);height:2px;background:var(--gold)}
.intro{background:transparent;color:inherit;padding-bottom:8px}
.intro h1,.about-page h1,.contact-page h1{font-size:clamp(32px,4vw,54px)}
.filter{justify-content:center}.filter a:first-child,.filter a:hover{background:#a72025;color:white}
.product-overview{margin-bottom:24px}.product>div>a{color:#8e1a20}
.about-page .wrap,.contact{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(22px,4vw,55px)}
.about-page h1::after,.contact-page h1::after{margin-bottom:18px}
.about-photo,.contact iframe{border-radius:9px;width:100%}
.contact iframe{height:350px;border:0;background:#e8dfd4}
.contact .details{border:0;background:transparent;padding:0}
.contact .details>div{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;border:0;padding:6px 0}
.contact .details dt{position:absolute;clip-path:inset(50%)}
.contact .details dd{grid-column:2;grid-row:1;overflow-wrap:anywhere}
.contact-icon{grid-column:1;grid-row:1;display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#292a2b;color:#d3a550;font-size:20px}
footer .contact-band{justify-content:center;align-items:center;gap:15px 25px}
.contact-band strong{font-size:clamp(22px,3vw,35px)}
.contact-band a{border-left:1px solid #b9b4ae;padding-left:19px;font-size:clamp(14px,1.8vw,20px)}
.contact-band a span{color:#d3a550;margin-right:6px}
@media(max-width:850px){.categories{grid-template-columns:repeat(3,minmax(0,1fr))}.head{gap:10px}nav{gap:13px}}
@media(max-width:650px){
 .top .wrap{gap:8px;flex-wrap:wrap}.top .location{display:none}.social{gap:7px}
 .brand img{width:51px;height:60px}.brand strong{padding-left:8px}.head{min-height:0}
 .hero .wrap{display:grid;min-height:0;padding:30px 0 0;gap:20px}
 .hero .wrap>div,.hero img{width:100%}.hero img{position:static;height:220px;border-radius:8px 8px 0 0;object-position:center}
 .hero::after{display:none}
 .about-page .wrap,.contact{grid-template-columns:1fr}.categories{grid-template-columns:repeat(2,minmax(0,1fr))}
 .contact iframe{height:275px}
}

/* Compact type and full homepage */
body{font-size:14px}
.brand strong{font-size:clamp(17px,2.1vw,26px)}
.hero h1{font-size:clamp(27px,3.7vw,53px)}
.hero p,.intro p{font-size:15px}
.intro h1,.about-page h1,.contact-page h1{font-size:clamp(27px,3.2vw,42px)}
h2{font-size:clamp(21px,2.35vw,31px)}
h3,.category h3{font-size:clamp(14px,1.35vw,18px)}
.contact-band strong{font-size:clamp(19px,2.25vw,27px)}
.contact-band a{font-size:clamp(13px,1.45vw,17px)}
.home-products{background:#fffaf5}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head>a{color:#8e1a20;font-weight:700}
.home-products .products{grid-template-columns:repeat(5,minmax(0,1fr))}
.home-about .wrap,.home-contact .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(18px,4vw,50px)}
.home-about img{width:100%;border-radius:8px;max-height:310px;object-fit:cover}
.home-about .button,.home-contact .button{margin-top:16px}
.home-contact{background:#efe7dc}
.home-contact .details{padding:12px 16px}
.home-contact .contact-icon{display:none}
@media(max-width:850px){.home-products .products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){
 .home-about .wrap,.home-contact .wrap{grid-template-columns:1fr}
 .home-products .products{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero h1{font-size:clamp(25px,6.8vw,36px)}
}

/* Compact site header and panoramic storefront hero */
.top .wrap{padding-block:4px;min-height:32px}
.social-mark{width:21px;height:21px}
.social-mark svg{width:13px;height:13px}
.twitter svg{width:17px;height:17px}
.head{min-height:70px;padding-block:5px}
.brand img{width:51px;height:57px}
.brand{gap:9px}
.brand strong{padding-left:9px}
.head .whatsapp{padding:7px}
.hero .wrap{min-height:clamp(315px,35vw,480px)}
.hero img{width:100%;object-position:center}
.hero::after{background:linear-gradient(90deg,#17181979,transparent 66%)}
@media(max-width:650px){
 .head{min-height:0}
 .brand img{width:40px;height:46px}
 .head nav{padding-bottom:3px}
 .hero .wrap{min-height:0}
 .hero img{height:auto;aspect-ratio:2/1;object-fit:cover;object-position:right center}
}

.brand img{width:48px;height:48px}
.floating-whatsapp{position:fixed;z-index:10;right:max(17px,env(safe-area-inset-right));bottom:max(17px,env(safe-area-inset-bottom));display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#087c36;color:white;box-shadow:0 4px 14px #0004}
.floating-whatsapp:hover{background:#06672c}
.floating-whatsapp svg{width:28px;height:28px;fill:currentColor}
body{padding-bottom:0}
footer{padding-right:62px}
@media(max-width:650px){.brand img{width:40px;height:40px}.floating-whatsapp{width:48px;height:48px}}

.brand img{width:clamp(174px,20vw,262px);height:auto;max-height:48px}
@media(max-width:650px){.brand img{width:clamp(155px,50vw,205px);max-height:41px}}


/* Orijinal logo ve firma adı */
.brand-lockup{display:flex;flex-direction:column;align-items:center;gap:3px}.brand .brand-lockup img{display:block;width:clamp(200px,21vw,270px);height:auto;max-height:48px;object-fit:contain}.brand-subtitle{color:#252525;font-family:Arial,sans-serif;font-weight:800;font-size:10px;letter-spacing:.02em;white-space:nowrap}@media(max-width:600px){.brand .brand-lockup img{width:190px;max-height:39px}.brand-subtitle{font-size:8.5px}}
