@font-face{font-family:"Mea Culpa";src:url("fonts/MeaCulpa-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/PlayfairDisplay-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/DMSans-Regular.ttf") format("truetype");font-display:swap}

@view-transition{navigation:auto}

:root{
  --cream:#f7e8c4;
  --brown:#842c0c;
  --brown-deep:#6f250d;
  --green:#07512e;
  --hover:#07512e;
  --white:#fffaf0;
  --header-h:132px;
  --page-x:clamp(24px,7vw,118px);
  --shadow:0 16px 34px rgb(70 31 10/14%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cream)}
body{
  margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;
  background:radial-gradient(circle at 20% 10%,rgb(255 255 255/18%),transparent 30%),var(--cream);
  color:var(--brown);font-family:"DM Sans",Arial,sans-serif
}
::selection{background:var(--green);color:white}
img{display:block;max-width:100%}
a{color:inherit}
a,button{-webkit-tap-highlight-color:transparent}

.skip-link{
  position:fixed;z-index:999;top:12px;left:12px;transform:translateY(-160%);
  border-radius:999px;background:var(--hover);color:#fff;padding:10px 18px;transition:transform .18s ease
}
.skip-link:focus{transform:translateY(0)}

.site-header{
  position:relative;z-index:20;display:grid;min-height:var(--header-h);
  grid-template-columns:minmax(250px,380px) 1fr;align-items:stretch;
  border-bottom:7px double var(--white);background:var(--brown);color:var(--white)
}
.brand-link{
  position:relative;display:grid;width:min(100%,370px);min-height:var(--header-h);place-items:center;
  overflow:visible;border-radius:0 0 120px 0;background:var(--brown);text-decoration:none;
   width:350px;
    height:150px;

    left:60%;
    bottom:-50px;

    transform:translateX(-50%);

    background:var(--brown);

    border-radius:999px;

    z-index:-1
}
.brand-link::before{
  font-family:"Mea Culpa","Brush Script MT",cursive;
  font-size:clamp(2.3rem,4vw,4rem);line-height:1
}
.brand-link::after{
  position:absolute;bottom:18px;left:50%;
  width:max-content;transform:translateX(-50%);font:600 .54rem/1 "DM Sans",sans-serif;letter-spacing:.34em
}
.brand-logo{
  position:absolute;inset:-19% 0% 0;width:100%;height:100%;object-fit:contain;object-position:center;
  transition:opacity .25s ease,transform .35s ease
}
.brand-logo--hover{opacity:0}
.brand-link:hover .brand-logo--default,.brand-link:focus-visible .brand-logo--default{opacity:0;transform:scale(.97)}
.brand-link:hover .brand-logo--hover,.brand-link:focus-visible .brand-logo--hover{opacity:1}

.site-nav{
  display:flex;align-items:center;justify-content:space-evenly;gap:clamp(12px,2.5vw,42px);
  padding:0 clamp(22px,5vw,84px) 0 24px
}
.site-nav a{
  position:relative;display:inline-flex;min-height:48px;align-items:center;justify-content:center;
  border-radius:999px;color:white;font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1rem,1.7vw,1.55rem);font-weight:600;letter-spacing:.02em;
  padding:10px 22px;text-decoration:none;
  transition:color .22s ease,background-color .22s ease,transform .22s ease
}
.site-nav a::after{
  content:"";position:absolute;right:20%;bottom:7px;left:20%;height:2px;transform:scaleX(0);
  background:currentColor;transition:transform .22s ease
}
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current="page"]{
  background:var(--white);color:var(--hover);transform:translateY(-2px);outline:none
}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}

.page-shell{min-height:calc(100vh - var(--header-h) - 64px)}
.site-footer{display:grid;min-height:64px;place-items:center;background:var(--green);color:white;font-size:clamp(.75rem,1.4vw,1rem);text-align:center}
.site-footer p{margin:0;padding:18px 24px}
.script-title{
  margin:0;color:var(--brown);font-family:"Mea Culpa","Brush Script MT",cursive;
  font-size:clamp(5rem,13vw,10rem);font-weight:400;line-height:.8
}
.body-copy{font-size:clamp(1rem,1.55vw,1.35rem);line-height:1.55}

/* Reveal berurutan tanpa JavaScript */
.reveal-down,.reveal-up,.reveal-scale{
  animation-duration:.72s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.7,.2,1)
}
.reveal-down{animation-name:reveal-down}
.reveal-up{animation-name:reveal-up}
.reveal-up1{animation-name:reveal-up;display:contents}
.reveal-scale{animation-name:reveal-scale}
.delay-1{animation-delay:.12s}.delay-2{animation-delay:.24s}.delay-3{animation-delay:.36s}
.delay-4{animation-delay:.48s}.delay-5{animation-delay:.6s}
.word{display:inline-block;animation:word-drop .68s cubic-bezier(.22,.75,.26,1) both}
.word:nth-child(2){animation-delay:.12s}.word:nth-child(3){animation-delay:.24s}.word:nth-child(4){animation-delay:.36s}
.scroll-reveal{animation:reveal-up 1ms both;animation-timeline:view();animation-range:entry 5% entry 40%}
.asset-hover{transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.asset-hover:hover{transform:scale(1.245) rotate(-.5deg);filter:saturate(1.08) drop-shadow(0 16px 18px rgb(77 35 12/15%))}

@keyframes reveal-down{from{opacity:0;transform:translateY(-34px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes reveal-up{from{opacity:0;transform:translateY(46px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes reveal-scale{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes word-drop{from{opacity:0;transform:translateY(-.8em) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
::view-transition-old(root){animation:.26s ease both page-fade-out}
::view-transition-new(root){animation:.42s ease .08s both page-fade-in}
@keyframes page-fade-out{to{opacity:0;transform:scale(.992)}}
@keyframes page-fade-in{from{opacity:0;transform:translateY(10px)}}

/* Homepage */
.home-hero{position:relative;min-height:clamp(680px,69vw,1040px);overflow:clip}
.home-person{position:absolute;z-index:3;bottom:9%;left:2%;width:min(52vw,770px)}
.home-frame-l{position:absolute;z-index:4;bottom:0;left:1%;width:min(90vw,1280px);pointer-events:none}
.home-copy{position:absolute;z-index:5;top:15%;left:37%;width:min(43vw,630px);text-align:center}
.home-copy h1{
  margin:0;color:var(--brown);font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(3rem,6vw,7rem);font-weight:600;line-height:.85
}
.home-copy .calligraphy{display:block;color:var(--green);font-family:"Mea Culpa",cursive;font-size:1.18em;font-weight:400}
.home-copy p{max-width:370px;margin:44px auto 0;color:var(--brown-deep);font-size:clamp(.9rem,1.45vw,1.2rem);line-height:1.65}
.home-portrait{position:absolute;z-index:2;right:-1%;width:min(31vw,440px)}
.home-portrait--one{top:0}.home-portrait--two{top:45%;right:6%}
.home-promise{
  display:grid;min-height:clamp(520px,52vw,800px);grid-template-columns:1.1fr .9fr;
  align-items:center;gap:30px;padding:42px var(--page-x) 80px
}
.promise-copy{text-align:center}
.promise-copy p{margin:0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,4.4vw,5rem);line-height:1.55}
.promise-copy .accent{color:var(--green);font-family:"Mea Culpa",cursive;font-size:1.35em}
.home-bolen{width:min(100%,620px);justify-self:center}

/* Profil */
.profile-layout{
  display:grid;min-height:calc(100vh - var(--header-h) - 64px);
  grid-template-columns:minmax(340px,.85fr) minmax(420px,1.25fr);
  align-items:end;gap:clamp(36px,6vw,110px);padding:54px var(--page-x) 0
}
.owner-card{position:relative;align-self:end;margin:0}
.owner-card img{width:min(100%,680px);margin:auto}
.owner-caption{
  position:absolute;right:0;bottom:38px;left:0;width:86%;margin:auto;border-radius:58px;
  background:var(--brown);color:white;font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(.82rem,1.5vw,1.25rem);line-height:1.35;padding:18px 34px
}
.profile-story{align-self:center;padding-bottom:52px}
.profile-story .script-title{margin-bottom:54px}
.profile-story p{margin:0 0 1.25em}

/* Produk */
.product-page{padding:54px var(--page-x) 110px}
.product-page>.script-title{margin-bottom:80px;text-align:center}
.product-list{display:grid;gap:clamp(90px,11vw,160px);max-width:1120px;margin:auto}
.product-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(34px,7vw,100px)}
.product-card:nth-child(even) .product-visual{order:2}
.product-visual{position:relative;display:grid;min-height:420px;place-items:center}
.product-frame,.product-image{grid-area:1/1}.product-frame{z-index:1;width:100%}
.product-image{z-index:2;width:114%;max-height:380px;object-fit:contain}
.best-seller{position:absolute;z-index:3;top:18%;right:0;width:min(34%,170px)}
.product-copy h2{margin:0 0 18px;color:var(--green);font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.3rem,2.4vw,2.15rem)}
.product-copy p{margin:0 0 18px;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.55}
.product-price{
  display:inline-flex;border-bottom:2px solid transparent;font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(1.1rem,2vw,1.65rem);text-decoration:none;transition:color .2s ease,border-color .2s ease
}
.product-price:hover,.product-price:focus-visible{border-color:currentColor;color:var(--green)}

/* Lokasi */
.location-layout{
  display:grid;min-height:calc(100vh - var(--header-h) - 64px);grid-template-columns:1.1fr .9fr;
  align-items:center;gap:clamp(36px,7vw,110px);padding:60px var(--page-x)
}
.location-copy .script-title{margin-bottom:40px}
.address-list{font-size:clamp(.95rem,1.45vw,1.2rem);line-height:1.55}
.address-list p{margin:0 0 30px}
.map-link{display:block;overflow:hidden;border:12px solid var(--green);border-radius:24px;box-shadow:var(--shadow)}
.map-link img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.map-link:hover img,.map-link:focus-visible img{transform:scale(1.035);filter:saturate(1.05)}
.map-link:focus-visible{outline:5px solid var(--hover);outline-offset:6px}

/* Kontak */
.contact-layout{
  display:grid;min-height:calc(100vh - var(--header-h) - 64px);grid-template-columns:.9fr 1.1fr;
  align-items:center;gap:clamp(42px,7vw,110px);padding:50px var(--page-x) 62px
}
.contact-copy{justify-self:center}.contact-copy .script-title{margin-bottom:42px}
.contact-copy p{font-size:clamp(1.05rem,1.65vw,1.35rem)}
.contact-actions{display:flex;align-items:center;gap:26px;margin:18px 0 38px}
.contact-icon{
  display:grid;width:82px;height:82px;place-items:center;border-radius:22px;
  transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease
}
.contact-icon img{max-width:70px;max-height:70px}
.contact-icon--phone{
  width:auto;height:auto;grid-template-columns:52px auto;gap:18px;padding:8px 18px 8px 8px;
  color:var(--brown);font-size:clamp(1.05rem,1.7vw,1.4rem);text-decoration:none
}
.contact-icon--phone img{width:48px}
.contact-icon:hover,.contact-icon:focus-visible{
  background:var(--hover);color:white;transform:translateY(-5px);
  box-shadow:0 14px 28px rgb(14 16 39/22%);outline:none
}
.contact-basket{width:min(100%,720px);justify-self:center}

@media(max-width:900px){
  :root{--header-h:auto}
  .site-header{grid-template-columns:1fr;border-bottom-width:5px}
  .brand-link{width:100%;min-height:112px;border-radius:0}
  .brand-link::before{font-size:3.3rem}.brand-link::after{bottom:13px}
  .site-nav{flex-wrap:wrap;gap:4px;padding:10px 16px 16px}
  .site-nav a{flex:1 1 130px;font-size:.95rem;padding:9px 12px}
  .home-hero{display:grid;min-height:auto;grid-template-columns:1fr 1fr;gap:20px;padding:42px 20px 0}
  .home-copy{position:relative;top:auto;left:auto;grid-column:1/-1;width:100%;padding:10px 0 24px}
  .home-copy p{margin-top:26px}
  .home-person,.home-portrait{position:relative;inset:auto;width:100%}
  .home-person{grid-column:1/-1;width:min(100%,680px);justify-self:center}
  .home-frame-l{display:none}.home-portrait{align-self:center}
  .home-promise,.profile-layout,.location-layout,.contact-layout{min-height:auto;grid-template-columns:1fr}
  .profile-layout{padding-top:64px}.profile-story{grid-row:1;padding-bottom:0}
  .profile-story .script-title{margin-bottom:38px}
  .owner-card{width:min(100%,620px);justify-self:center}
  .product-card{grid-template-columns:1fr;gap:18px}
  .product-card:nth-child(even) .product-visual{order:0}
  .product-copy{text-align:center}
  .location-copy,.contact-copy{width:min(100%,680px);justify-self:center}
  .map-link,.contact-basket{width:min(100%,620px);justify-self:center}
}

@media(max-width:560px){
  :root{--page-x:22px}
  .site-nav a{flex-basis:42%}
  .home-hero{grid-template-columns:1fr}
  .home-copy h1{font-size:clamp(3rem,16vw,5rem)}
  .home-portrait{width:min(92%,360px);justify-self:center}
  .home-promise{padding-top:70px}.promise-copy p{line-height:1.35}
  .owner-caption{position:relative;bottom:auto;width:100%;border-radius:24px;text-align:center}
  .product-page>.script-title{margin-bottom:40px}.product-visual{min-height:300px}
  .contact-actions{flex-wrap:wrap}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

@supports not (animation-timeline:view()){
  .scroll-reveal{animation-duration:.7s}
}


.home-copy .home-title1{
   font-size: .8em;
  position: relative;
    left: 0px;
    top: 170px;
}

.home-title4{
  position: relative;
    left: 0px;
    top: -50px;
}

.home-copy .home-title2{
   font-size: .9em;
  position: relative;
    left: 200px;
    top: -20px;
}
.home-copy .home-title3{
   font-size: 2em;
  position: relative;
    left: -300px;
    top: 50px;
}