@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#183b3a;--muted:#718381;--teal:#087f78;--teal2:#0caaa0;--deep:#073f43;--cream:#f6f8f5;--line:#e5ece8;--white:#fff;--shadow:0 14px 40px rgba(14,65,61,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.65 'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--cream)}a{text-decoration:none;color:inherit}img{max-width:100%}.wrap{width:min(1160px,92%);margin:auto}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(225,235,230,.85);padding:14px 0}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:800 25px/1 'Manrope',sans-serif;letter-spacing:-1.2px;color:var(--deep)}.brand:before{content:'';display:inline-block;width:11px;height:22px;margin-right:9px;vertical-align:-4px;border-radius:9px 9px 3px 9px;background:linear-gradient(145deg,#19b5a9,#08756f);transform:rotate(25deg)}.links{display:flex;align-items:center;gap:27px;color:#526966;font-weight:600;font-size:14px}.links a:hover{color:var(--teal)}
.hero{position:relative;overflow:hidden;color:white;padding:92px 0 88px;background:radial-gradient(circle at 82% 20%,rgba(74,205,182,.38),transparent 26%),linear-gradient(115deg,#063f43 0%,#08766f 58%,#10a094 100%)}.hero:after{content:'';position:absolute;width:410px;height:410px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-110px;bottom:-250px;box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025)}.hero .wrap{position:relative;z-index:1}.hero h1{font:800 clamp(36px,5.5vw,62px)/1.08 'Manrope',sans-serif;letter-spacing:-2px;max-width:720px;margin:0 0 20px}.hero p{max-width:600px;color:rgba(255,255,255,.83);font-size:17px;margin:0 0 30px}.hero .btn{background:white;color:var(--deep);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.section{padding:62px 0}.section h2{font:800 clamp(25px,3vw,34px)/1.2 'Manrope',sans-serif;letter-spacing:-.8px;margin:0 0 24px}.section-intro{color:var(--muted);margin:-12px 0 28px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.card{display:block;background:white;border:1px solid var(--line);border-radius:17px;padding:18px;box-shadow:0 5px 18px rgba(20,65,60,.035);transition:transform .2s,box-shadow .2s,border-color .2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c8e2dc}.card h3{font:700 17px/1.35 'Manrope',sans-serif;margin:14px 0 6px}.card .photo{height:220px;margin:-18px -18px 16px;border-radius:16px 16px 0 0;background:linear-gradient(145deg,#eaf3ef,#dcebe6);display:grid;place-items:center;overflow:hidden;color:#849a94;font-size:13px}.card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.card:hover .photo img{transform:scale(1.04)}.muted{color:var(--muted);font-size:13px}.price{font:800 20px 'Manrope',sans-serif;color:var(--teal);margin:10px 0 15px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(120deg,var(--teal),#0b9b91);color:white;padding:12px 20px;border-radius:10px;font-weight:700;border:0;cursor:pointer;box-shadow:0 7px 17px rgba(8,127,120,.18);transition:transform .2s,filter .2s}.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.footer{background:#062f33;color:#d9e8e4;padding:38px 0;margin-top:35px}.footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer small{color:#9db7b0}.form{display:grid;gap:13px;max-width:650px}.form input,.form select,.form textarea,input,select,textarea{font:inherit}.form input,.form select,.form textarea{padding:13px 14px;border:1px solid #d7e2dd;border-radius:10px;background:white}.table{width:100%;border-collapse:collapse;background:white;border-radius:12px;overflow:hidden}.table td,.table th{padding:13px;border-bottom:1px solid var(--line);text-align:left}.table th{background:#f0f6f3;font-weight:700}.admin{display:grid;grid-template-columns:235px 1fr;min-height:100vh;background:#f4f7f5}.side{background:var(--deep);color:white;padding:24px}.side a{display:block;padding:11px 13px;margin:4px 0;border-radius:9px;color:#d7e9e4}.side a:hover{background:rgba(255,255,255,.12)}.main{padding:32px;overflow:auto}.stats{display:flex;gap:15px;flex-wrap:wrap}.stat{background:white;border:1px solid var(--line);padding:22px;border-radius:14px;min-width:190px;box-shadow:0 4px 15px rgba(0,0,0,.03)}.notice,.error{padding:13px 16px;border-radius:10px}.notice{background:#e7f6ee;color:#23694c}.error{background:#ffeded;color:#8b2020}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.links{gap:15px}.hero{padding:72px 0}}@media(max-width:620px){.nav{align-items:flex-start;flex-direction:column;gap:13px}.links{width:100%;gap:16px;overflow:auto;white-space:nowrap;padding-bottom:3px}.hero{padding:57px 0}.hero h1{letter-spacing:-1px}.hero p{font-size:15px}.section{padding:42px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:12px;border-radius:13px}.card .photo{height:155px;margin:-12px -12px 12px;border-radius:12px 12px 0 0}.card h3{font-size:14px}.price{font-size:17px}.btn{padding:10px 14px;font-size:13px}.admin{grid-template-columns:1fr}.side nav{display:flex;flex-wrap:wrap}.main{padding:16px}}

/* Navigasi publik Merma Dayli */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid #e4ece8;box-shadow:0 5px 24px rgba(7,63,67,.045)}
.site-nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.site-logo{display:flex;align-items:center;flex:0 0 auto}
.site-logo img{display:block;width:auto;height:58px;max-width:190px;object-fit:contain}
.main-navigation{display:flex;align-items:center;gap:8px}
.nav-link,.nav-drop-button{display:inline-flex;align-items:center;gap:7px;padding:11px 13px;border:0;border-radius:9px;background:transparent;color:#49625e;font:600 14px 'DM Sans',Arial,sans-serif;cursor:pointer;white-space:nowrap}
.nav-link:hover,.nav-drop-button:hover,.nav-dropdown.is-open>.nav-drop-button{background:#edf7f3;color:#087f78}
.nav-dropdown{position:relative}
.chevron{font-size:17px;line-height:1;transition:transform .2s}
.nav-dropdown.is-open .chevron{transform:rotate(180deg)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:220px;padding:8px;background:white;border:1px solid #e3ece7;border-radius:13px;box-shadow:0 18px 40px rgba(10,55,50,.14)}
.nav-dropdown.is-open .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;color:#49625e;font-size:14px}
.nav-dropdown-menu a:hover{background:#edf7f3;color:#087f78}
.nav-contact{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;margin-left:5px;border-radius:9px;background:linear-gradient(120deg,#087f78,#0b9b91);color:white;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 6px 15px rgba(8,127,120,.16)}
.nav-contact:hover{filter:brightness(1.06)}
.nav-toggle{display:none;width:43px;height:40px;border:1px solid #dce9e3;border-radius:10px;background:white;padding:9px;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:#087f78;margin:4px 0;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
 .site-nav{min-height:72px;position:relative;flex-wrap:wrap;gap:8px}
 .site-logo img{height:52px}
 .nav-toggle{display:block;margin-left:auto}
 .main-navigation{display:none;order:3;width:100%;padding:8px 0 15px;align-items:stretch;flex-direction:column;gap:4px}
 .main-navigation.is-open{display:flex}
 .nav-link,.nav-drop-button{width:100%;justify-content:space-between;padding:12px 13px}
 .nav-dropdown-menu{position:static;min-width:0;margin:3px 0 7px 12px;box-shadow:none;border-radius:10px;background:#f7fbf9}
 .nav-dropdown.is-open .nav-dropdown-menu{display:block}
 .nav-contact{margin:7px 0 0;text-align:center}
}

/* MERMA DAYLI — storefront layout inspired by contemporary home-living ecommerce */
:root{--md-ink:#173d3b;--md-teal:#087f78;--md-mint:#e8f2ed;--md-paper:#fbfaf7;--md-line:#e8e9e3}
body{background:#fff;color:var(--md-ink)}
.md-hero{background:#e9f1eb;overflow:hidden;min-height:450px;position:relative}
.md-hero-inner{min-height:450px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px}
.md-hero-copy{padding:65px 0;position:relative;z-index:2}.eyebrow{display:inline-block;font-size:10px;letter-spacing:2px;font-weight:800;color:#d6eee5}.eyebrow.dark{color:#6b8d80}
.md-hero h1{font:800 clamp(38px,5vw,62px)/1.08 'Manrope',sans-serif;letter-spacing:-2.2px;max-width:610px;margin:18px 0;color:#174440}.md-hero-copy p{max-width:510px;color:#59736b;font-size:16px;margin:0 0 27px}
.md-button{display:inline-flex;gap:30px;align-items:center;background:#0b625b;color:#fff;padding:14px 20px;font-size:13px;font-weight:800;border-radius:2px;letter-spacing:.2px}.md-button:hover{background:#084b47}.md-button.light{background:#fff;color:#15544d}
.md-hero-art{height:390px;position:relative;overflow:hidden}.hero-orbit{position:absolute;width:390px;height:390px;border:1px solid rgba(23,68,64,.15);border-radius:50%;right:25px;top:5px;box-shadow:0 0 0 45px rgba(255,255,255,.18),0 0 0 90px rgba(255,255,255,.12)}.hero-fabric{position:absolute;width:300px;height:260px;right:80px;top:85px;border-radius:48% 52% 38% 62%;background:linear-gradient(145deg,#fff 0%,#d7e7df 48%,#9ebeb0 100%);transform:rotate(-17deg);box-shadow:28px 25px 50px rgba(30,75,65,.12)}.hero-fabric:after{content:'';position:absolute;inset:18px;border:1px solid rgba(255,255,255,.65);border-radius:inherit}.hero-label{position:absolute;z-index:2;right:3px;bottom:20px;background:#fff;padding:17px 22px;color:#648078;font-size:12px;line-height:1.5;box-shadow:0 12px 30px rgba(40,75,60,.1)}.hero-label b{font:800 17px 'Manrope';color:#174440}
.md-category-section{padding:58px 0 66px}.md-section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:24px}.md-section-heading h2,.md-about-strip h2{font:800 clamp(25px,3vw,34px)/1.2 'Manrope';letter-spacing:-.8px;margin:8px 0 0;color:#1c4540}.md-text-link{font-size:12px;font-weight:800;color:#0b756d;white-space:nowrap;padding-bottom:5px}.md-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.md-category-tile{height:132px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:17px 18px;background:#eef3ed;color:#234d45;overflow:hidden;transition:transform .2s}.md-category-tile:hover{transform:translateY(-3px)}.md-category-tile:after{content:'';position:absolute;width:115px;height:115px;border:1px solid rgba(22,83,72,.14);border-radius:50%;right:-22px;bottom:-44px;box-shadow:0 0 0 17px rgba(255,255,255,.18)}.tile-2{background:#e9f0f1}.tile-3{background:#f2eee6}.tile-4{background:#e9eee7}.category-mark{font-size:10px;letter-spacing:1px;color:#76968a}.category-name{font:800 19px 'Manrope';position:relative;z-index:1}.category-arrow{position:absolute;right:17px;top:16px;font-size:18px;color:#537a6c;z-index:1}
.md-category-tile{height:166px;min-width:0;padding:14px 16px 13px;align-items:stretch}
.md-category-tile:after{width:105px;height:105px;right:-28px;bottom:-48px;pointer-events:none}
.category-mark{position:relative;z-index:2}
.category-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;margin:2px auto 4px;width:100%;max-width:112px}
.category-icon img{display:block;width:100%;height:100%;max-height:94px;object-fit:contain;object-position:center}
.category-icon-fallback{font-size:46px;color:#8ca99a}
.category-name{font-size:clamp(14px,1.25vw,19px);line-height:1.15;max-width:100%;overflow-wrap:anywhere}
@media(max-width:640px){
 .md-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .md-category-tile{height:145px;padding:12px}
 .category-icon{max-width:90px}
 .category-icon img{max-height:78px}
 .category-name{font-size:15px}
}

.md-products-section{background:#fafaf7;padding:62px 0 70px}.md-subtitle{margin:8px 0 0;color:#7a8981;font-size:13px}.md-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px}.md-product-card{background:#fff;min-width:0;border:1px solid #edeee8;transition:box-shadow .2s,transform .2s}.md-product-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(24,65,54,.08)}.md-product-image{display:block;position:relative;width:100%;aspect-ratio:4/4.55;background:#f0f2ed;overflow:hidden}.md-product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.md-product-card:hover .md-product-image img{transform:scale(1.035)}.image-placeholder{display:grid;place-items:center;width:100%;height:100%;color:#9aaba2;font:800 15px 'Manrope';letter-spacing:2px}.product-tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);padding:5px 8px;font-size:8px;font-weight:800;letter-spacing:1px;color:#52766a}.md-product-info{padding:14px 14px 13px}.product-category{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#8a9b91;margin:0 0 6px}.md-product-info h3{font:700 14px/1.4 'Manrope';margin:0 0 5px;color:#294a43;min-height:39px}.md-product-info h3 a:hover{color:#078078}.product-spec{font-size:11px;color:#87938c;margin:0;min-height:18px}.md-product-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0eb;margin-top:12px;padding-top:11px}.md-product-bottom strong{font:800 15px 'Manrope';color:#0a756d}.md-product-bottom>a{width:27px;height:27px;display:grid;place-items:center;background:#edf4ef;color:#21685d;font-size:16px}.md-empty{grid-column:1/-1;color:#7a8981;padding:30px 0}
.md-promo{margin-top:64px;margin-bottom:62px;min-height:260px;background:#0c514c;color:white;display:flex;justify-content:space-between;align-items:center;padding:40px 7%;position:relative;overflow:hidden}.md-promo>div:first-child{position:relative;z-index:2}.md-promo h2{font:800 clamp(29px,4vw,43px)/1.12 'Manrope';letter-spacing:-1px;margin:12px 0}.md-promo p{color:#c4dcd3;max-width:430px;font-size:13px;margin:0 0 20px}.promo-decoration{position:absolute;right:8%;top:-45px;width:330px;height:330px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.16);font:800 95px 'Manrope'}.promo-decoration i,.promo-decoration b{position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.18);border-radius:50%}.promo-decoration b{width:130px;height:130px}
.md-about-strip{display:flex;align-items:center;gap:22px;padding:20px 0 62px}.about-icon{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:50%;background:#e9f1eb;color:#327467;font-size:25px}.md-about-strip h2{font-size:22px;max-width:550px}.md-about-strip .md-text-link{margin-left:auto}
.md-footer{background:#103b38;color:#dbe9e3;padding:48px 0 0}.md-footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:45px;padding-bottom:38px}.footer-logo{width:auto;height:58px;max-width:185px;object-fit:contain;filter:brightness(0) invert(1)}.md-footer p{font-size:12px;color:#a9c2b8;max-width:280px}.md-footer-grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:12px}.md-footer-grid b{font-size:13px;color:#fff;margin-bottom:5px}.md-footer-grid a:hover{color:#fff}.md-copyright{border-top:1px solid rgba(255,255,255,.13);padding:16px 0 19px;color:#91b0a5;font-size:10px}
@media(max-width:900px){.md-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.md-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.md-hero-inner{grid-template-columns:1fr .75fr}.hero-fabric{right:10px}.hero-orbit{right:-70px}}
@media(max-width:620px){.md-hero-inner{display:block;min-height:0}.md-hero-copy{padding:53px 0 38px}.md-hero h1{font-size:39px;letter-spacing:-1.5px}.md-hero-art{height:170px;margin-top:-20px}.hero-orbit{width:190px;height:190px;right:25px;top:0}.hero-fabric{width:155px;height:130px;right:43px;top:26px}.hero-label{right:0;bottom:3px;padding:9px 12px;font-size:10px}.hero-label b{font-size:13px}.md-category-section{padding:40px 0}.md-section-heading{align-items:flex-start;flex-direction:column;gap:10px}.md-category-tile{height:105px;padding:13px}.category-name{font-size:16px}.md-products-section{padding:42px 0}.md-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px}.md-product-info{padding:10px}.md-product-info h3{font-size:12px;min-height:34px}.product-spec{font-size:10px}.md-product-bottom strong{font-size:13px}.product-tag{font-size:7px;top:7px;left:7px}.md-promo{margin-top:38px;margin-bottom:40px;padding:30px 22px;min-height:260px}.promo-decoration{right:-135px;opacity:.8}.md-about-strip{align-items:flex-start;flex-wrap:wrap;padding-bottom:40px}.md-about-strip h2{font-size:19px}.md-about-strip .md-text-link{margin-left:74px}.md-footer-grid{grid-template-columns:1fr 1fr;gap:25px}.md-footer-grid>div:first-child{grid-column:1/-1}}

/* Footer sosial rata tengah + tipografi responsif untuk semua perangkat */
html{font-size:clamp(14px,0.35vw + 12px,16px)}
body{font-size:1rem}
.md-footer{padding:clamp(34px,5vw,54px) 0 0}
.md-footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(22px,3vw,34px)}
.md-footer-brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.md-footer-logo-link{display:inline-flex;align-items:center;justify-content:center;background:#fff;padding:8px 12px;border-radius:12px;max-width:min(220px,58vw)}
.md-footer .footer-logo{display:block;width:clamp(112px,17vw,172px);height:auto;max-height:105px;object-fit:contain;filter:none}
.md-footer-brand p{margin:0;font-size:clamp(12px,1.1vw,14px);text-align:center}
.md-footer-columns{display:flex;justify-content:center;align-items:flex-start;gap:clamp(38px,8vw,110px);width:100%;text-align:center}
.md-footer-column{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(12px,1vw,14px)}
.md-footer-column b,.md-footer-social>b{font-size:clamp(13px,1.1vw,15px);color:#fff;margin-bottom:3px}
.md-footer-column p{margin:0;text-align:center}
.md-footer-social{display:flex;flex-direction:column;align-items:center;gap:13px}
.md-social-list{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}
.md-social-link{width:clamp(42px,5vw,48px);height:clamp(42px,5vw,48px);display:grid;place-items:center;border:1px solid rgba(226,244,236,.3);border-radius:50%;color:#e8f5ef;background:rgba(255,255,255,.07);transition:background .2s,transform .2s,color .2s}
.md-social-link:hover{background:#fff;color:#087f78;transform:translateY(-3px)}
.md-social-link svg{width:clamp(20px,2.3vw,24px);height:clamp(20px,2.3vw,24px);fill:currentColor}
.md-social-link svg rect,.md-social-link svg circle{fill:none}
.md-copyright{width:100%;text-align:center;font-size:clamp(11px,.9vw,13px);line-height:1.5;padding:17px 12px 20px}
@media(max-width:620px){
 .md-footer{padding-top:34px}
 .md-footer-inner{gap:24px}
 .md-footer-columns{gap:22px;flex-wrap:wrap}
 .md-footer-column{min-width:125px}
 .md-social-list{gap:11px}
 .md-copyright{padding:15px 14px 18px}
}

/* Ikon sosial dari file logo yang diberikan */
.md-social-link{overflow:hidden;padding:0}
.md-social-link img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.md-social-link:hover img{transform:scale(1.04)}


/* Social icons: same visual footprint across desktop, tablet and mobile */
.md-social-list {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 1.5vw, 16px);
  flex-wrap:wrap;
}
.md-social-link {
  width:clamp(38px, 4.2vw, 48px);
  height:clamp(38px, 4.2vw, 48px);
  min-width:38px;
  min-height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  background:transparent;
  border:0;
  box-shadow:none;
}
.md-social-link img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  aspect-ratio:1 / 1;
}
@media (max-width:620px) {
  .md-social-list { gap:10px; }
  .md-social-link { width:42px; height:42px; min-width:42px; min-height:42px; }
}

/* Standarisasi gambar kartu katalog: semua kartu memakai bidang gambar seragam dan responsif */
.md-product-image{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  display:block;
  overflow:hidden;
  background:#f3f5f1;
}
.md-product-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:clamp(6px,1.2vw,14px);
}
.md-product-card{min-width:0;height:100%;display:flex;flex-direction:column}
.md-product-info{display:flex;flex:1;flex-direction:column;min-width:0}
.md-product-bottom{margin-top:auto}
.card .photo{
  width:calc(100% + 36px);
  height:auto;
  aspect-ratio:1 / 1;
  margin:-18px -18px 16px;
  overflow:hidden;
}
.card .photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:clamp(6px,1.2vw,14px);
}
@media(max-width:620px){
  .card .photo{
    width:calc(100% + 24px);
    height:auto;
    aspect-ratio:1 / 1;
    margin:-12px -12px 12px;
  }
}

/* Halaman kontak dan Google Maps Merma Dayli */
.map-contact{
  margin-top:clamp(28px,4vw,42px);
  padding:clamp(18px,3vw,30px);
  background:#f7faf7;
  border:1px solid #e5ece8;
  border-radius:16px;
}
.map-contact h2{
  margin:0 0 8px;
  color:#173d3b;
  font:800 clamp(22px,2.8vw,30px)/1.25 'Manrope',sans-serif;
}
.map-contact p{
  margin:0 0 18px;
  color:#718381;
  font-size:14px;
}
.map-frame{
  display:block;
  width:100%;
  height:clamp(280px,42vw,460px);
  border:0;
  border-radius:12px;
  background:#e8f2ed;
  box-shadow:0 8px 24px rgba(14,65,61,.08);
}
.map-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}
.map-actions .btn{
  min-height:44px;
}
@media(max-width:620px){
  .map-contact{
    margin-top:24px;
    padding:15px;
    border-radius:13px;
  }
  .map-frame{
    height:320px;
    border-radius:10px;
  }
  .map-actions .btn{
    width:100%;
  }
}

/* Peta lokasi pada footer Merma Dayli */
.md-footer-map-wrap{
  width:min(100%,280px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.md-footer-map{
  display:block;
  width:100%;
  height:170px;
  border:3px solid rgba(255,255,255,.9);
  border-radius:12px;
  background:#e8f2ed;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.md-footer-map-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border:1px solid rgba(226,244,236,.35);
  border-radius:8px;
  color:#e8f5ef;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.md-footer-map-link:hover{
  background:#fff;
  color:#087f78;
}
@media(max-width:620px){
  .md-footer-map-wrap{width:min(100%,320px)}
  .md-footer-map{height:190px}
}

/* Ikon media sosial: logo putih dengan latar darkcyan */
.md-social-link{
  background:#008b8b !important;
  border:1px solid #008b8b !important;
  color:#fff !important;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.md-social-link img{
  display:block;
  width:68%;
  height:68%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.md-social-link svg{
  fill:#fff;
  color:#fff;
}
.md-social-link svg rect,
.md-social-link svg circle{
  stroke:#fff;
  fill:none;
}
.md-social-link:hover{
  background:#006f70 !important;
  border-color:#006f70 !important;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}


/* FINAL FIX: ikon sosial darkcyan dengan logo putih.
   mix-blend-mode:screen menghilangkan bidang hitam yang mungkin sudah menyatu
   di dalam file PNG ikon, sehingga yang tampak hanya logo putih. */
.md-footer .md-social-link,
.md-social-list .md-social-link{
  background:#008b8b !important;
  border:1px solid #008b8b !important;
  border-radius:50% !important;
  width:clamp(42px,4.2vw,48px);
  height:clamp(42px,4.2vw,48px);
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
.md-footer .md-social-link img,
.md-social-list .md-social-link img{
  width:68% !important;
  height:68% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  filter:none !important;
  mix-blend-mode:screen;
  background:transparent !important;
}
.md-footer .md-social-link:hover,
.md-social-list .md-social-link:hover{
  background:#006f70 !important;
  border-color:#006f70 !important;
}

/* Tombol WhatsApp pada detail produk */
.product-info a.product-order,
.product-info .product-order{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:12px 20px !important;
  border-radius:10px !important;
  background:#008b8b !important;
  background-image:none !important;
  border:1px solid #008b8b !important;
  color:#fff !important;
  font-weight:700;
  box-shadow:0 7px 17px rgba(0,139,139,.2) !important;
}
.product-info a.product-order img,
.product-info .product-order img{
  width:23px !important;
  height:23px !important;
  object-fit:contain !important;
  filter:brightness(0) invert(1) !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
}
.product-info a.product-order:hover,
.product-info .product-order:hover{
  background:#006f70 !important;
  border-color:#006f70 !important;
  color:#fff !important;
}

/* Footer bersama: tampil konsisten di seluruh halaman publik */
.md-footer{width:100%;clear:both}
.md-footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:36px;flex-wrap:wrap}
.md-footer-social{width:100%;text-align:center}
.md-social-list{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.md-footer .md-social-link{background:#008b8b!important;border-color:#008b8b!important}
.md-footer .md-social-link img{filter:brightness(0) invert(1)!important;mix-blend-mode:normal!important}
@media(max-width:700px){
 .md-footer-inner{align-items:center;justify-content:center;text-align:center;gap:26px}
 .md-footer-columns{width:100%;justify-content:center;gap:28px}
 .md-footer-brand{width:100%;display:flex;align-items:center;flex-direction:column}
 .md-footer-social{width:100%}
}

/* Pusatkan peta Google Maps pada footer di desktop dan mobile */
.md-footer .md-footer-brand{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.md-footer .md-footer-map-wrap{
  margin-left:auto;
  margin-right:auto;
  align-self:center;
}
.md-footer .md-footer-brand > p{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* FINAL OVERRIDE: peta footer benar-benar di tengah lebar footer
   pada desktop, tablet, dan mobile. */
.md-footer .md-footer-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  justify-items:center !important;
  align-items:start !important;
  column-gap:clamp(22px,5vw,56px) !important;
  row-gap:28px !important;
}
.md-footer .md-footer-grid > .md-footer-brand{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.md-footer .md-footer-brand .md-footer-map-wrap,
.md-footer .md-footer-map-wrap{
  width:min(100%,320px) !important;
  max-width:320px !important;
  margin-inline:auto !important;
  align-self:center !important;
  justify-self:center !important;
  position:static !important;
  transform:none !important;
}
.md-footer .md-footer-map{
  display:block !important;
  width:100% !important;
  margin-inline:auto !important;
}
.md-footer .md-footer-grid > :not(.md-footer-brand){
  justify-self:center !important;
  align-items:center !important;
  text-align:center !important;
}
.md-footer .md-footer-columns{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  flex-wrap:wrap !important;
  text-align:center !important;
}
.md-footer .md-footer-column{
  align-items:center !important;
  text-align:center !important;
}
.md-footer .md-footer-social,
.md-footer .md-social-list,
.md-footer .md-copyright{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.md-footer .md-footer-social{flex-direction:column !important}
@media(max-width:700px){
  .md-footer .md-footer-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    justify-items:center !important;
  }
  .md-footer .md-footer-grid > .md-footer-brand{
    grid-column:1 / -1 !important;
  }
  .md-footer .md-footer-columns{
    gap:22px !important;
  }
}

/* Pilihan warna dan stok pada kartu katalog */
.catalog-colors{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 6px;font-size:13px}
.catalog-color-option{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:#405653}
.catalog-color-option input{accent-color:#008b8b;margin:0}
.catalog-color-option input:disabled+ .color-dot{opacity:.35}
.color-dot{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid #cbd5d1;background:var(--swatch)}
.catalog-stock{font-size:13px;color:#087d70;font-weight:700;margin:5px 0 12px}