@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--green:#173e32;--green2:#255747;--cream:#f8f3e8;--paper:#fffdf7;--red:#b42b27;--gold:#c9a96a;--ink:#26352e;--muted:#65736c;--line:#e5e1d4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,textarea{font:inherit}.container{max-width:1160px;margin:auto;padding:0 24px}.announcement{background:var(--green);color:#f4ead7;text-align:center;padding:9px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.header{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:25px}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand img{width:90px;height:52px;object-fit:contain;mix-blend-mode:multiply}.brandname{font-family:'Playfair Display',serif;font-size:21px;font-weight:700;color:var(--green);line-height:1.1}.brandname small{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:.16em;color:var(--red);margin-top:5px}.links{display:flex;gap:29px;align-items:center}.links a{font-size:14px;font-weight:700;color:#46574e}.links a:hover,.links a.active{color:var(--red)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff!important;padding:13px 22px;border-radius:3px;font-weight:700;font-size:13px;letter-spacing:.03em;border:1px solid var(--red);cursor:pointer}.btn:hover{background:#8f211d}.btn-outline{background:transparent;color:var(--green)!important;border-color:var(--green)}.btn-outline:hover{background:var(--green);color:white!important}.hamburger{display:none;background:none;border:0;font-size:28px;color:var(--green);cursor:pointer}.hero{background:var(--green);color:#fff;position:relative;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#53745b55,transparent 44%),repeating-linear-gradient(135deg,transparent 0 33px,#ffffff07 34px 35px)}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:55px;padding-top:78px;padding-bottom:85px;min-height:570px}.eyebrow{font-size:12px;letter-spacing:.22em;font-weight:700;text-transform:uppercase;color:var(--red);margin:0 0 15px}.hero .eyebrow{color:#eacb93}.hero h1,.pagehero h1{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(44px,5.4vw,74px);line-height:1.12;letter-spacing:-.03em;margin:0 0 24px}.hero p{font-size:17px;color:#e4e9dd;max-width:520px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero .btn-outline{color:white!important;border-color:#e7dfc5}.hero-art{border:1px solid #ffffff4d;padding:14px;transform:rotate(2deg);background:#ffffff14;box-shadow:0 30px 65px #0c201c77}.hero-art img{width:100%;aspect-ratio:4/4.1;object-fit:cover}.seal{position:absolute;bottom:24px;right:16px;background:var(--red);padding:17px 22px;border-radius:100px;color:white;font-family:'Playfair Display',serif;font-size:18px;transform:rotate(-10deg)}section{padding:80px 0}.sectionhead{text-align:center;max-width:690px;margin:0 auto 38px}.sectionhead h2,.split h2,.pagehero h1,.contact-card h2{font-family:'Playfair Display',serif}.sectionhead h2,.split h2{font-size:clamp(32px,3.5vw,48px);line-height:1.2;margin:0 0 13px;color:var(--green)}.sectionhead p{color:var(--muted);margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 15px 35px #14352d13}.card img{width:100%;height:235px;object-fit:cover}.cardbody{padding:22px}.cardbody h3{font-family:'Playfair Display',serif;font-size:24px;color:var(--green);margin:0 0 7px}.cardbody p{color:var(--muted);font-size:14px;margin:0}.chip{display:inline-block;background:#f7e9e0;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;margin-bottom:10px}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.split p{color:var(--muted)}.split-image{padding:12px;background:var(--paper);border:1px solid var(--line)}.split-image img{width:100%;aspect-ratio:1.16;object-fit:cover}.cream-section{background:#efe9db}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.feature{border-top:2px solid var(--gold);padding-top:19px}.feature .number{font-family:'Playfair Display',serif;color:var(--red);font-size:28px}.feature h3{font-size:18px;margin:6px 0}.feature p{color:var(--muted);font-size:14px;margin:0}.cta{background:var(--green);color:white;text-align:center;padding:70px 20px}.cta h2{font-family:'Playfair Display',serif;font-size:40px;margin:0 0 10px}.cta p{color:#d4ded5}.pagehero{background:var(--green);color:#fff;padding:80px 0;text-align:center}.pagehero h1{font-size:clamp(40px,5vw,62px);margin:0 0 12px}.pagehero p{color:#d8e1d7;max-width:670px;margin:auto}.pagehero .eyebrow{color:#eacb93}.filterbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px}.filter{background:var(--paper);border:1px solid var(--line);color:var(--green);padding:10px 16px;cursor:pointer;font-size:13px;font-weight:700}.filter.active,.filter:hover{background:var(--green);color:white}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.menu-item{background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:13px}.menu-item img{width:94px;height:94px;object-fit:cover;flex-shrink:0}.menu-item h3{font-size:15px;line-height:1.3;margin:0 0 6px;color:var(--green)}.menu-item p{font-size:12px;color:var(--muted);margin:0}.note{background:#fff7e9;border-left:3px solid var(--gold);padding:14px 18px;font-size:13px;color:#6c5942;margin-top:24px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.gallery-grid figure{margin:0;background:white;border:1px solid var(--line)}.gallery-grid img{width:100%;height:270px;object-fit:cover}.gallery-grid figcaption{padding:12px 15px;color:var(--muted);font-size:13px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.contact-card{background:var(--paper);border:1px solid var(--line);padding:28px}.contact-card h2{color:var(--green);font-size:28px;margin:0 0 10px}.contact-card p{color:var(--muted);margin:8px 0}.contact-card a{text-decoration:underline;text-decoration-color:var(--gold)}.footer{background:#102e25;color:#dbe4d7;padding:55px 0 20px}.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}.footer h3{color:white;margin:0 0 12px}.footer p,.footer a{font-size:13px;color:#b9c9bc}.footer a{display:block;margin:8px 0}.footbottom{border-top:1px solid #ffffff26;margin-top:36px;padding-top:20px;font-size:12px;color:#a8bcae;display:flex;justify-content:space-between;gap:10px}.muted{color:var(--muted)}.center{text-align:center}.mt{margin-top:30px}.list{padding-left:20px;color:var(--muted)}@media(max-width:900px){.cards,.menu-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.hero-grid,.split{gap:30px}.links{gap:15px}.nav .btn{display:none}}@media(max-width:680px){.nav{min-height:70px}.brand img{width:72px;height:44px}.brandname{font-size:18px}.hamburger{display:block}.links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:20px 24px;flex-direction:column;align-items:flex-start;gap:15px}.links.open{display:flex}.hero-grid,.split,.contact-grid,.foot-grid{grid-template-columns:1fr}.hero-grid{padding-top:55px;padding-bottom:60px}.hero-art{max-width:430px}.cards,.menu-grid,.gallery-grid,.feature-grid{grid-template-columns:1fr}.gallery-grid img{height:245px}section{padding:55px 0}.footbottom{flex-direction:column}.hero h1{font-size:45px}.pagehero{padding:55px 0}}[hidden]{display:none!important}

/* Long-form SEO editorial sections */
.seo-content{padding:72px 0;background:#fffdf8}.seo-content .container{max-width:930px}.seo-content h2{font-size:clamp(1.5rem,3vw,2.15rem);color:#173e32;margin:30px 0 16px;line-height:1.3}.seo-content h2:first-child{margin-top:0}.seo-content p{font-size:1.04rem;line-height:1.95;color:#3b403b;margin:0 0 18px}.seo-content h2:not(:first-child){padding-top:18px;border-top:1px solid #e5e4d9}

/* FAQ */
.faq-section{padding-top:52px;padding-bottom:72px;max-width:920px;margin-inline:auto}.faq-section h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:10px}.faq-intro{margin-bottom:26px;opacity:.8}.faq-item{border:1px solid #d7d5c8;border-radius:12px;background:#fffdf8;margin-bottom:12px;overflow:hidden}.faq-item summary{cursor:pointer;list-style:none;padding:19px 48px 19px 20px;font-weight:700;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';position:absolute;right:20px;top:16px;font-size:1.4rem;color:#a4362c}.faq-item[open] summary:after{content:'−'}.faq-item p{padding:0 20px 20px;margin:0;line-height:1.75}

/* Premium visual refresh: responsive, accessible, performant */
:root{--shadow:0 18px 55px rgba(16,46,37,.10);--radius:18px}
body{background:linear-gradient(180deg,#f8f3e8 0%,#fdfbf6 45%,#f6f1e8 100%);-webkit-font-smoothing:antialiased}
::selection{background:#b42b27;color:#fff}
:focus-visible{outline:3px solid #c9a96a;outline-offset:3px}
.scroll-progress{position:fixed;left:0;top:0;width:0;height:3px;background:linear-gradient(90deg,#b42b27,#c9a96a);z-index:200;pointer-events:none}
.announcement{letter-spacing:.11em;background:linear-gradient(100deg,#12362b,#265b47,#12362b)}
.header{box-shadow:0 4px 22px rgba(12,45,33,.045)}
.links a{position:relative;padding:8px 0;transition:color .2s}
.links a:after{content:'';position:absolute;bottom:1px;left:0;width:0;height:2px;background:var(--red);transition:width .25s}
.links a:hover:after,.links a.active:after{width:100%}
.btn{border-radius:100px;min-height:46px;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 7px 16px rgba(143,33,29,.13)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(143,33,29,.18)}
.hero{background:linear-gradient(120deg,#123b2e,#1d5140 65%,#143d30)}
.hero:before{opacity:.9}
.hero-art{border-radius:12px;overflow:hidden;transform:rotate(1deg);box-shadow:0 28px 70px #0a211b80;transition:transform .4s}
.hero-art:hover{transform:rotate(0) scale(1.015)}
.hero-art img{border-radius:6px}
.hero h1{letter-spacing:-.045em;text-wrap:balance}
.hero-actions{gap:14px}
.sectionhead h2,.split h2,.pagehero h1{text-wrap:balance;letter-spacing:-.025em}
.sectionhead:after{content:'';display:block;width:55px;height:3px;background:var(--gold);margin:22px auto 0;border-radius:20px}
.card,.contact-card,.gallery-grid figure{border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 30px rgba(17,55,40,.045)}
.card{transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#d4c6a7}
.card img,.gallery-grid img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover img,.gallery-grid figure:hover img{transform:scale(1.045)}
.cardbody{padding:24px}
.chip{border-radius:100px}
.split-image{border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.feature{padding:24px;background:#fffdf8;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:16px}
.feature .number{line-height:1.1}
.pagehero{background:radial-gradient(circle at 90% 20%,#3a6a4d,#174536 52%,#12352b);position:relative;overflow:hidden}
.pagehero:after{content:'';position:absolute;width:260px;height:260px;border:1px solid #ffffff26;border-radius:50%;right:-90px;top:-90px;pointer-events:none}
.filterbar{gap:8px}
.filter{border-radius:100px;transition:all .2s}
.filter.active{box-shadow:0 7px 15px #14352d22}
.menu-item{border-radius:14px;transition:transform .2s,box-shadow .2s}
.menu-item:hover{transform:translateY(-3px);box-shadow:0 12px 25px #14352d13}
.menu-item img{border-radius:10px}
.menu-search-wrap{max-width:480px;margin:0 auto 24px;position:relative}
.menu-search-wrap:before{content:'⌕';position:absolute;left:18px;top:9px;font-size:26px;color:var(--red)}
#menuSearch{width:100%;border:1px solid #d8d2c1;border-radius:100px;background:#fffdf8;padding:13px 20px 13px 49px;outline:none;box-shadow:0 6px 22px #14352d0a}
#menuSearch:focus{border-color:var(--green);box-shadow:0 0 0 3px #2557471b}
.gallery-grid figure{position:relative;cursor:zoom-in}
.gallery-grid img{cursor:zoom-in}
.gallery-grid figcaption{background:#fffdf8}
.contact-card{padding:32px}
.faq-item{border-radius:16px;box-shadow:0 4px 18px #173e3208;transition:border-color .2s}
.faq-item[open]{border-color:#c9a96a}
.faq-item summary{font-size:15px}
.seo-content{background:linear-gradient(180deg,#fffdf8,#f9f5ec)}
.seo-content h2{font-family:'Playfair Display',serif}
.mobile-dock{display:none}
.reveal{opacity:1;transform:none}
@media(min-width:681px){.js-motion .reveal:not(.visible){opacity:0;transform:translateY(16px)}.js-motion .reveal{transition:opacity .55s,transform .55s}.js-motion .reveal.visible{opacity:1;transform:none}}
@media(max-width:900px){.container{padding-left:20px;padding-right:20px}.hero-grid{gap:25px}.cards{gap:16px}}
@media(max-width:680px){
 html{scroll-padding-top:85px}body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 .announcement{font-size:10px;letter-spacing:.06em;padding:7px 12px}
 .header{top:0}.nav{min-height:66px}.brand{gap:7px}.brand img{width:68px;height:40px}.brandname{font-size:17px}.brandname small{font-size:8px}
 .hamburger{width:44px;height:44px;border:1px solid #e3dfd2;border-radius:12px;background:#fffdf8;font-size:24px}
 .links{top:66px;padding:15px 24px 22px;box-shadow:0 20px 25px #173e321a}.links a{width:100%;padding:9px 0}
 .container{padding-left:18px;padding-right:18px}
 .hero-grid{padding-top:40px;padding-bottom:48px;gap:30px;min-height:auto}.hero h1{font-size:clamp(37px,10vw,52px);line-height:1.13;margin-bottom:17px}.hero p{font-size:15px;line-height:1.8}
 .hero-art{margin:0 10px 0 0;transform:rotate(1deg)}.hero-art img{aspect-ratio:1.25;object-fit:cover}.seal{font-size:13px;padding:11px 15px;right:-4px;bottom:13px}
 .hero-actions .btn{flex:1;min-width:125px;padding:12px 15px}
 section{padding:50px 0}.sectionhead{margin-bottom:26px}.sectionhead h2,.split h2{font-size:32px}.sectionhead p{font-size:14px}
 .cards{gap:16px}.card img{height:215px}.cardbody{padding:18px}.cardbody h3{font-size:22px}
 .feature-grid{gap:13px}.feature{padding:20px}.split{gap:24px}.split-image{border-radius:16px}
 .pagehero{padding:45px 0}.pagehero h1{font-size:39px}.pagehero p{font-size:14px}
 .menu-grid{gap:12px}.menu-item{padding:11px;gap:13px}.menu-item img{width:85px;height:85px}.menu-item h3{font-size:15px}
 .filterbar{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px 2px 12px;margin-right:-18px}.filterbar::-webkit-scrollbar{display:none}.filter{flex:0 0 auto;padding:9px 14px}
 .gallery-grid{gap:13px}.gallery-grid img{height:230px}.gallery-grid figure{border-radius:14px}
 .contact-card{padding:22px}.contact-card h2{font-size:25px}
 .seo-content{padding:42px 0}.seo-content p{font-size:15px;line-height:1.85}.seo-content h2{font-size:26px}
 .faq-section{padding:40px 18px 55px}.faq-item summary{padding:17px 45px 17px 17px;font-size:14px}.faq-item p{padding:0 17px 18px;font-size:14px}
 .cta{padding:48px 18px}.cta h2{font-size:30px}
 .foot-grid{gap:20px}.footer{padding:42px 0 22px}.footbottom{font-size:11px}
 .mobile-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:110;background:rgba(255,253,247,.97);backdrop-filter:blur(16px);border-top:1px solid #e1dbca;box-shadow:0 -9px 30px #15372c16;padding:8px 6px calc(8px + env(safe-area-inset-bottom));}
 .mobile-dock a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#6d746c;font-size:10px;font-weight:700;line-height:1.25;min-height:48px;justify-content:center;border-radius:12px}
 .mobile-dock a.current{color:var(--red);background:#b42b270d}
 .dock-icon{font-size:22px;line-height:1.1}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.lightbox{position:fixed;inset:0;background:rgba(8,22,18,.94);z-index:300;display:flex;align-items:center;justify-content:center;padding:60px 18px 50px;cursor:zoom-out}.lightbox img{max-height:83vh;max-width:min(1100px,100%);object-fit:contain;border-radius:8px}.lightbox-close{position:absolute;top:15px;right:18px;background:white;border:0;border-radius:100px;width:42px;height:42px;font-size:26px;cursor:pointer}

/* Peta dua cabang dan kontak mobile */
.location-map{display:block;width:100%;height:285px;border:0;border-radius:16px;margin-top:20px;background:#e9e5dc}.location-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.location-actions .btn{text-decoration:none!important;border-radius:10px;min-height:44px}.phone-line a{font-weight:800;color:var(--green);text-decoration:underline}.locations-preview .contact-card h3{font-family:'Playfair Display',serif;color:var(--green);font-size:25px;margin:0 0 10px}.locations-preview .contact-card>.btn{margin-top:18px;text-decoration:none}.locations-preview .contact-card{min-width:0}@media(max-width:680px){.location-map{height:240px}.location-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.location-actions .btn{padding:12px 8px;font-size:12px}.locations-preview .contact-card{padding:20px}}


/* Interactive menu articles: responsive accessible dialog */
.menu-item[data-menu-index]{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.menu-item[data-menu-index]:hover{transform:translateY(-4px);box-shadow:0 14px 36px #123a3024}
.menu-item[data-menu-index]:focus-visible{outline:3px solid #b74c36;outline-offset:3px}
.menu-item[data-menu-index] img{transition:transform .25s ease}
.menu-item[data-menu-index]:hover img{transform:scale(1.025)}
.menu-article-dialog{border:0;padding:0;border-radius:22px;width:min(760px,calc(100vw - 28px));max-height:min(88dvh,900px);box-shadow:0 25px 80px #09271fd0;background:#fffaf1;color:#183e32;overflow:auto;overscroll-behavior:contain}
.menu-article-dialog::backdrop{background:rgba(6,22,18,.76);backdrop-filter:blur(5px)}
.menu-dialog-shell{position:relative}
.menu-dialog-close{position:sticky;top:12px;float:right;z-index:3;margin:12px 12px -55px 0;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#183e32;font-size:30px;cursor:pointer;box-shadow:0 2px 12px #0003}
.menu-dialog-hero img{width:100%;height:clamp(180px,34vw,330px);object-fit:cover;display:block}
.menu-dialog-heading{padding:22px 28px 8px}
.menu-dialog-eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#9e4637;font-weight:800}
.menu-dialog-heading h2{font-size:clamp(1.55rem,4vw,2.3rem);line-height:1.2;margin:8px 0}
.menu-dialog-heading strong{color:#a53c2c;font-size:1.25rem}
.menu-dialog-body{padding:6px 28px 20px;font-size:1rem;line-height:1.85}
.menu-dialog-body p{margin:14px 0}
.menu-dialog-footer{padding:0 28px 28px}
.menu-dialog-done{background:#173e32;color:#fff;border:0;border-radius:12px;padding:14px 20px;font-weight:700;cursor:pointer;width:100%}
@media(max-width:600px){.menu-article-dialog{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0}.menu-dialog-heading{padding:18px 18px 5px}.menu-dialog-body{padding:4px 18px 14px;font-size:.95rem}.menu-dialog-footer{padding:0 18px 24px}.menu-dialog-hero img{height:215px}.menu-dialog-close{top:10px}}
@media(prefers-reduced-motion:reduce){.menu-item[data-menu-index],.menu-item[data-menu-index] img{transition:none}}


/* Gambar utuh: tidak ada pemotongan di desktop maupun mobile */
.hero-art img,.split-image img,.card img,.menu-item img,.gallery-grid img,.menu-dialog-hero img{
  object-fit:contain!important;object-position:center!important;
  background:#f5efe3;
}
.hero-art img{width:100%;height:auto!important;aspect-ratio:auto!important;max-height:none!important}
.split-image img{width:100%;height:auto!important;aspect-ratio:auto!important}
.card img{width:100%;height:auto!important;aspect-ratio:auto!important;max-height:none!important}
.gallery-grid img{width:100%;height:auto!important;aspect-ratio:auto!important;max-height:none!important}
.menu-item img{width:100px;height:100px;object-fit:contain!important;flex-shrink:0}
.menu-item{min-width:0}.menu-item>div{min-width:0}
.menu-dialog-hero img{width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}
.menu-article-dialog{max-width:calc(100vw - 16px)}
.lightbox img{max-width:100%;max-height:calc(100dvh - 100px);width:auto;height:auto;object-fit:contain}
@media(max-width:680px){
 .hero-art img,.split-image img,.card img,.gallery-grid img,.menu-dialog-hero img{height:auto!important;aspect-ratio:auto!important}
 .menu-item img{width:88px;height:88px}
 .menu-article-dialog{width:100%;max-width:100%;max-height:94dvh}
}
.domain-dropdown { width: 100%; max-width: 450px; margin: 20px auto; font-family: Arial, sans-serif; } .domain-details { width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); overflow: hidden; } .domain-dropdown-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; color: #222222; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; transition: background 0.3s ease; } .domain-dropdown-btn::-webkit-details-marker { display: none; } .domain-dropdown-btn::marker { content: ""; } .domain-dropdown-btn:hover { background: #fff5ed; } .dropdown-arrow { font-size: 12px; color: #d97706; transition: transform 0.3s ease; } .domain-details[open] .dropdown-arrow { transform: rotate(180deg); } .domain-dropdown-menu { display: flex; flex-direction: column; max-height: 350px; overflow-y: auto; background: #ffffff; border-top: 1px solid #eeeeee; padding: 8px; } .domain-dropdown-menu a { display: block; padding: 12px 15px; margin: 2px 0; color: #333333; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none; border-radius: 7px; transition: all 0.2s ease; } .domain-dropdown-menu a:hover { background: #fff0df; color: #c65c00; padding-left: 20px; } .domain-dropdown-menu::-webkit-scrollbar { width: 5px; } .domain-dropdown-menu::-webkit-scrollbar-track { background: #f5f5f5; } .domain-dropdown-menu::-webkit-scrollbar-thumb { background: #d6a36c; border-radius: 10px; } @media (max-width: 768px) { .domain-dropdown { max-width: 100%; margin: 15px auto; } .domain-dropdown-btn { padding: 14px 16px; font-size: 14px; } .domain-dropdown-menu { max-height: 300px; } .domain-dropdown-menu a { padding: 11px 12px; font-size: 13px; } }