/* ARABISION final responsive + language UI, 2026-09-16.
   Loaded after the legacy stylesheet so it can safely neutralize older duplicate rules
   without removing any existing site feature. */
:root{
  --ar-gold:#d9a441;
  --ar-gold-light:#f2c97d;
  --ar-bg:#050507;
  --ar-header:rgba(0,0,0,.92);
  --ar-line:rgba(217,164,65,.30);
}
html{scroll-padding-top:96px;overflow-x:hidden}
body{overflow-x:hidden!important;background:var(--ar-bg)}
header{position:sticky!important;top:0!important;z-index:5000!important;background:var(--ar-header)!important;border-bottom:1px solid var(--ar-line)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
.navbar{
  direction:ltr!important;
  width:100%!important;
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:max-content minmax(420px,1fr) max-content!important;
  grid-template-areas:"brand nav language"!important;
  align-items:center!important;
  gap:18px!important;
  padding:14px clamp(18px,2.3vw,38px)!important;
  flex-wrap:nowrap!important;
  background:transparent!important;
  border:0!important;
}
.nav-left{grid-area:brand!important;width:auto!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;order:initial!important;flex:none!important}
.logo{height:54px!important;width:auto!important;max-width:58px!important;object-fit:contain!important;flex:0 0 auto!important}
.nav-left-title{margin:0!important;padding:0!important;min-width:0!important;direction:ltr!important}
.nav-logo-text{margin:0!important;font-size:clamp(1.28rem,1.65vw,1.68rem)!important;line-height:1.05!important;letter-spacing:.12em!important;white-space:nowrap!important;color:#a88435!important}
.nav-company-name{margin-top:4px!important;font-size:.82rem!important;line-height:1.2!important;white-space:nowrap!important;color:#5f9f62!important;opacity:.95!important}
.nav-center{grid-area:nav!important;width:100%!important;min-width:0!important;display:flex!important;justify-content:stretch!important;align-items:center!important;margin:0!important;order:initial!important;flex:none!important}
.nav-menu{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-evenly!important;gap:clamp(2px,.35vw,8px)!important;flex-wrap:nowrap!important;row-gap:0!important;margin:0!important;padding:0!important;list-style:none!important;white-space:nowrap!important}
.nav-menu li{flex:0 0 auto!important}
.nav-menu a{display:block!important;padding:9px clamp(6px,.62vw,11px)!important;font-size:clamp(.84rem,.88vw,1rem)!important;line-height:1.2!important;font-weight:650!important;color:var(--ar-gold)!important;white-space:nowrap!important}
.nav-menu a:hover{color:var(--ar-gold-light)!important}
.nav-right{grid-area:language!important;width:auto!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;justify-self:end!important;margin:0!important;order:initial!important;flex:none!important}

/* KKOTDANJANG-style compact dropdown language selector. */
.lang-switcher.language-select{position:relative!important;display:block!important;width:auto!important;min-width:148px!important;flex:none!important}
.lang-current{width:100%!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;padding:7px 11px!important;border-radius:999px!important;border:1px solid rgba(217,164,65,.48)!important;background:#090909!important;color:var(--ar-gold-light)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;cursor:pointer!important;font:750 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif!important;white-space:nowrap!important}
.lang-current:hover,.language-select.open .lang-current{border-color:rgba(242,201,125,.78)!important;background:#11100e!important}
.lang-current .lang-flag,.lang-option .lang-flag{display:block!important;width:22px!important;height:22px!important;border-radius:50%!important;object-fit:cover!important;box-shadow:0 0 0 1px rgba(255,255,255,.16)!important;flex:0 0 auto!important}
.lang-current span{flex:1 1 auto!important;text-align:left!important}
.lang-chevron{font-size:10px!important;opacity:.72!important;transition:transform .15s ease!important}
.language-select.open .lang-chevron{transform:rotate(180deg)!important}
.lang-menu{position:absolute!important;top:calc(100% + 8px)!important;right:0!important;left:auto!important;width:196px!important;max-height:min(390px,70vh)!important;overflow-y:auto!important;display:none!important;z-index:2147482000!important;padding:7px!important;border-radius:16px!important;border:1px solid rgba(217,164,65,.34)!important;background:#080808!important;box-shadow:0 20px 45px rgba(0,0,0,.48)!important;scrollbar-width:thin!important}
.language-select.open .lang-menu{display:grid!important;gap:3px!important}
.lang-option{width:100%!important;display:flex!important;align-items:center!important;gap:10px!important;padding:9px 10px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--ar-gold-light)!important;cursor:pointer!important;font:700 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif!important;text-align:left!important}
.lang-option:hover,.lang-option.active{background:rgba(217,164,65,.12)!important;color:#ffe3a1!important}

/* RTL only changes readable content/menu order; physical language control stays on far right. */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .nav-menu{direction:rtl!important}
html[dir="rtl"] .nav-menu a{direction:rtl!important}
html[dir="rtl"] .lang-current span,html[dir="rtl"] .lang-option{text-align:right!important}
html[dir="rtl"] .section-header,html[dir="rtl"] .card,html[dir="rtl"] .service-card,html[dir="rtl"] .contact-grid{direction:rtl}

/* Content rhythm / cards. */
body>main{width:100%!important;max-width:1280px!important;margin:0 auto!important;padding:clamp(28px,4vw,58px) clamp(18px,3vw,34px) clamp(46px,5vw,72px)!important}
.section{margin-top:clamp(34px,5vw,62px)!important}
.section:first-child{margin-top:0!important}
.section-title{font-size:clamp(1.42rem,2vw,2rem)!important;line-height:1.25!important;overflow-wrap:anywhere}
.section-kicker{font-size:clamp(.68rem,.8vw,.8rem)!important;line-height:1.35!important;letter-spacing:.18em!important;color:rgba(242,201,125,.78)!important;overflow-wrap:anywhere}
.card,.service-card{overflow-wrap:anywhere}
.card-body,.service-body{font-size:clamp(.88rem,1vw,.98rem)!important;line-height:1.78!important}

/* Home hero: remove legacy conflicting fixed/vh rules. */
.hero{width:100%!important;height:auto!important;margin-top:0!important;border-radius:20px!important;overflow:hidden!important;isolation:isolate!important}
.hero-slider{position:relative!important;display:block!important;width:100%!important;height:clamp(430px,57svh,680px)!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
.hero-slide{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;opacity:0!important;transform:scale(1.025)!important;transition:opacity .8s ease,transform .8s ease!important}
.hero-slide.is-active{opacity:1!important;transform:scale(1)!important}
.hero-slide img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
.hero-overlay{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;padding:clamp(28px,5vw,68px)!important;background:linear-gradient(90deg,rgba(0,0,0,.79) 0%,rgba(0,0,0,.52) 44%,rgba(0,0,0,.17) 76%,rgba(0,0,0,.12) 100%)!important}
.hero-content{width:min(650px,60%)!important;max-width:650px!important}
.hero-kicker{font-size:clamp(.68rem,.9vw,.82rem)!important;line-height:1.4!important;letter-spacing:.27em!important}
.hero-title{font-size:clamp(1.75rem,3vw,2.75rem)!important;line-height:1.32!important;margin-bottom:1rem!important;overflow-wrap:anywhere!important}
.hero-subtitle{font-size:clamp(.9rem,1.15vw,1.05rem)!important;line-height:1.72!important;overflow-wrap:anywhere!important}

.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(14px,2vw,22px)!important}
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)!important;gap:clamp(22px,3vw,42px)!important;align-items:start!important}
.contact-form input,.contact-form textarea{width:100%!important;font-size:16px!important;min-width:0!important}
.contact-banner-bottom{width:100%!important;height:clamp(180px,28vw,390px)!important;min-height:0!important;margin:0!important;background-size:contain!important;background-position:center bottom!important}
.blog-layout-c{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;gap:clamp(18px,2.5vw,32px)!important}

footer{padding:18px clamp(18px,3vw,38px) calc(20px + env(safe-area-inset-bottom))!important;font-size:clamp(.72rem,.86vw,.82rem)!important;line-height:1.55!important;overflow-wrap:anywhere!important}

/* Tablet: brand/language on first row, scrollable menu on a compact second row. */
@media (max-width:1100px){
  html{scroll-padding-top:126px}
  .navbar{min-height:0!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand language" "nav nav"!important;gap:8px 14px!important;padding:10px 16px 9px!important}
  .logo{height:46px!important;max-width:50px!important}
  .nav-logo-text{font-size:1.34rem!important}
  .nav-company-name{font-size:.74rem!important}
  .nav-center{width:100%!important;min-width:0!important;justify-content:stretch!important;overflow:visible!important}
  .nav-menu{width:100%!important;max-width:100%!important;justify-content:space-evenly!important;gap:2px 4px!important;overflow:visible!important;padding:2px 0 3px!important;flex-wrap:wrap!important;white-space:normal!important}
  .nav-menu li{flex:0 1 auto!important}
  .nav-menu::-webkit-scrollbar{display:none!important}
  .nav-menu a{font-size:.84rem!important;padding:8px 10px!important}
  .lang-switcher.language-select{min-width:142px!important}
  body>main{padding:30px 18px 52px!important}
  .hero{border-radius:16px!important}
  .hero-slider{height:clamp(400px,55svh,560px)!important}
  .hero-content{width:min(620px,72%)!important}
  .hero-overlay{padding:clamp(28px,5vw,48px)!important}
  .blog-layout-c{grid-template-columns:1fr!important}
}

/* Phone / portrait tablet. */
@media (max-width:720px){
  html{scroll-padding-top:118px}
  .navbar{padding:9px 10px 7px!important;gap:7px 8px!important}
  .nav-left{gap:7px!important;min-width:0!important}
  .logo{height:39px!important;max-width:43px!important}
  .nav-logo-text{font-size:1.12rem!important;letter-spacing:.09em!important}
  .nav-company-name{font-size:.64rem!important;max-width:190px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .lang-switcher.language-select{min-width:106px!important;width:auto!important;max-width:128px!important}
  .lang-current{width:auto!important;min-width:106px!important;height:40px!important;min-height:40px!important;padding:6px 9px!important;justify-content:flex-start!important;gap:7px!important}
  .lang-current .lang-flag{width:22px!important;height:22px!important}
  .lang-current span{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:11px!important;color:var(--ar-gold-light)!important}
  .lang-current .lang-chevron{display:block!important;flex:0 0 auto!important;color:var(--ar-gold-light)!important}
  .lang-menu{right:0!important;width:min(220px,calc(100vw - 20px))!important;max-height:min(420px,70svh)!important}
  .nav-center{overflow:visible!important}
  .nav-menu{display:flex!important;flex-wrap:wrap!important;justify-content:space-evenly!important;align-items:center!important;gap:1px 2px!important;overflow:visible!important;white-space:normal!important;padding:1px 0 3px!important}
  .nav-menu li{flex:0 1 auto!important}
  .nav-menu a{font-size:.76rem!important;padding:6px 7px!important;text-align:center!important}
  body>main{padding:18px 12px 44px!important}
  .hero{border-radius:13px!important}
  .hero-slider{height:clamp(390px,63svh,520px)!important}
  .hero-slide img{object-position:center center!important}
  .hero-overlay{align-items:flex-end!important;padding:24px 18px 28px!important;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.66) 43%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.08) 100%)!important}
  .hero-content{width:100%!important;max-width:100%!important}
  .hero-kicker{font-size:.62rem!important;letter-spacing:.2em!important;margin-bottom:.55rem!important}
  .hero-title{font-size:clamp(1.45rem,7vw,2rem)!important;line-height:1.28!important;margin-bottom:.65rem!important}
  .hero-subtitle{font-size:.88rem!important;line-height:1.58!important}
  .section{margin-top:34px!important}
  .section-header{margin-bottom:14px!important}
  .section-kicker{letter-spacing:.12em!important}
  .section-grid-2,.services-grid,.contact-grid,.partner-grid{grid-template-columns:1fr!important}
  .card,.service-card{padding:16px!important;border-radius:14px!important}
  .partner-card-grid,body.page-partner .partner-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.page-partner .partner-card{padding:10px!important;min-height:145px!important}
  body.page-partner .partner-logo-box{height:62px!important;max-height:62px!important}
  .blog-featured,.blog-card{padding:14px!important}
  .contact-banner-bottom{height:clamp(150px,43vw,260px)!important}
  footer{padding:15px 12px calc(18px + env(safe-area-inset-bottom))!important;font-size:.72rem!important}
}

@media (max-width:420px){
  .navbar{padding-left:8px!important;padding-right:8px!important}
  .logo{height:36px!important;max-width:39px!important}
  .nav-logo-text{font-size:.96rem!important}
  .nav-company-name{display:none!important}
  .lang-switcher.language-select{min-width:102px!important;max-width:118px!important}
  .lang-current{min-width:102px!important;padding-inline:8px!important}
  .lang-current span{font-size:10.5px!important}
  .hero-slider{height:clamp(370px,64svh,480px)!important}
  .hero-overlay{padding:22px 15px 24px!important}
  .hero-title{font-size:1.42rem!important}
  .hero-subtitle{font-size:.82rem!important}
  .partner-card-grid,body.page-partner .partner-card-grid{grid-template-columns:1fr!important}
  .contact-banner-bottom{height:145px!important}
}

/* Avoid iOS keyboard zoom and horizontal layout shifts. */
@supports (-webkit-touch-callout:none){
  input,textarea,select,button{font-size:max(16px,1em)}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.lang-chevron{transition:none!important}
}


/* UI refinement v3 — restore mobile company subtitle, single-line swipe nav,
   and subtle gold separators across desktop/tablet/mobile. */
/* Desktop: visually structure brand | menu | language without changing the grid. */
@media (min-width:1101px){
  .nav-center{
    border-left:1px solid rgba(217,164,65,.20)!important;
    border-right:1px solid rgba(217,164,65,.20)!important;
    padding-left:clamp(10px,1vw,18px)!important;
    padding-right:clamp(10px,1vw,18px)!important;
  }
  .nav-right{padding-left:2px!important}
}

/* Tablet/phone: first row = brand + language, second row = one-line menu.
   The separator under row one prevents the header from looking visually empty. */
@media (max-width:1100px){
  .navbar{row-gap:0!important}
  .nav-left,.nav-right{padding-bottom:9px!important}
  .nav-right{
    border-left:0!important;
    padding-left:0!important;
  }
  .nav-center{
    width:calc(100% + 32px)!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    border-top:1px solid rgba(217,164,65,.22)!important;
    overflow:hidden!important;
    padding:2px 16px 0!important;
  }
  .nav-menu{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    padding:4px 0 2px!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    touch-action:pan-x!important;
  }
  .nav-menu::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .nav-menu li{flex:0 0 auto!important;scroll-snap-align:start!important}
  .nav-menu a{display:block!important;white-space:nowrap!important}
}

@media (max-width:720px){
  .nav-left,.nav-right{padding-bottom:8px!important}
  .nav-center{
    width:calc(100% + 20px)!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .nav-menu{gap:3px!important;padding-top:4px!important;padding-bottom:2px!important}
  .nav-menu a{font-size:.78rem!important;padding:7px 9px!important;text-align:left!important}
  .nav-company-name{
    display:block!important;
    margin-top:3px!important;
    max-width:min(46vw,190px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.61rem!important;
    line-height:1.15!important;
    color:#5f9f62!important;
  }
}

@media (max-width:420px){
  .nav-company-name{
    display:block!important;
    max-width:150px!important;
    font-size:.58rem!important;
  }
  .nav-right{padding-left:0!important}
  .lang-switcher.language-select{min-width:108px!important;max-width:124px!important}
  .lang-current{min-width:108px!important;padding-inline:8px!important;gap:6px!important}
  .lang-current span{display:block!important;font-size:10.5px!important}
}


/* UI refinement v4 — tablet nav centering and clean mobile/tablet top row.
   Keep phone navigation swipeable, but center the full tablet menu when it fits. */
@media (min-width:721px) and (max-width:1100px){
  .nav-right{border-left:0!important;padding-left:0!important}
  .nav-menu{
    justify-content:center!important;
    gap:clamp(8px,1.35vw,18px)!important;
    scroll-padding-inline:12px!important;
  }
  .nav-menu a{padding:8px clamp(8px,1vw,12px)!important}
}
@media (max-width:720px){
  .nav-right{border-left:0!important;padding-left:0!important}
  .nav-menu{justify-content:flex-start!important}
}


/* UI refinement v5 — portrait/tablet navigation uses the available row width.
   Keep the phone nav swipeable; tablet items are distributed instead of bunching in the center. */
@media (min-width:721px) and (max-width:1100px){
  .nav-menu{
    justify-content:space-between!important;
    gap:0!important;
  }
  .nav-menu a{
    padding:8px clamp(5px,.72vw,10px)!important;
  }
}