/* =========================
HERO FINAL FIX
========================= */

.ok-hero-section {

padding:80px 0;

}

.ok-hero-box {

display:grid !important;

grid-template-columns:1fr 1fr !important;

gap:60px;

align-items:center;

background:#ffffff;

padding:50px;

border-radius:24px;

box-shadow:0 10px 40px rgba(0,0,0,0.08);

}

.ok-hero-left,
.ok-hero-right {

width:100%;

min-width:0;

}

.ok-hero-img {

width:100%;

display:block;

border-radius:20px;

}

@media(max-width:768px){

.ok-hero-box {

grid-template-columns:1fr !important;

padding:30px;

}

}

/* =========================
WHATSAPP BUTTON
========================= */

.ok-wa-btn {

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

padding:14px 18px;

background:#25D366;

color:#ffffff !important;

text-decoration:none;

font-weight:700;

border-radius:12px;

transition:0.3s;

box-sizing:border-box;

}

.ok-wa-btn:hover {

transform:translateY(-2px);

background:#1ebe5d;

}

.ok-wa-icon {

font-size:18px;

line-height:1;

}

/* ======================================================
OKENGINE UI SYSTEM V2
====================================================== */

:root{

--ok-primary:#16a34a;
--ok-primary-dark:#15803d;

--ok-dark:#0f172a;
--ok-text:#334155;
--ok-muted:#64748b;

--ok-bg:#f8fafc;
--ok-card:#ffffff;

--ok-border:#e2e8f0;

--ok-radius:20px;

--ok-shadow:
0 10px 30px rgba(15,23,42,0.08);

}

/* RESET */

body{

margin:0;
padding:0;

font-family:
Inter,
system-ui,
sans-serif;

background:var(--ok-bg);
color:var(--ok-text);

line-height:1.7;

}

/* CONTAINER */

.ok-container{

max-width:1200px;
margin:auto;
padding:0 20px;

}

/* SECTION */

.ok-section{

padding:80px 0;

}

/* CARD */

.ok-card{

background:var(--ok-card);

border-radius:var(--ok-radius);

padding:40px;

box-shadow:var(--ok-shadow);

border:1px solid var(--ok-border);

}

/* GRID */

.ok-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

/* TITLE */

.ok-title{

font-size:56px;
line-height:1.1;
font-weight:800;

margin-bottom:20px;

color:var(--ok-dark);

}

/* SUBTITLE */

.ok-subtitle{

font-size:18px;
color:var(--ok-muted);

margin-bottom:30px;

}

/* HEADING */

.ok-heading{

font-size:38px;
font-weight:800;

margin-bottom:40px;

color:var(--ok-dark);

}

.ok-center{

text-align:center;

}

/* BUTTON */

.ok-btn,
.ok-wa-btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:14px 24px;

background:var(--ok-primary);

color:#fff;

font-weight:700;

border-radius:14px;

text-decoration:none;

transition:0.3s ease;

border:none;

cursor:pointer;

}

.ok-btn:hover,
.ok-wa-btn:hover{

background:var(--ok-primary-dark);

transform:translateY(-2px);

}

/* WA ICON */

.ok-wa-icon{

display:flex;
align-items:center;
justify-content:center;

}

/* TRUST */

.ok-trust{

display:flex;
flex-wrap:wrap;
gap:15px;

margin-top:25px;

font-size:15px;
font-weight:600;

color:var(--ok-muted);

}

/* IMAGE */

.ok-card img{

width:100%;
display:block;

border-radius:14px;

}

/* MOBILE */

@media(max-width:768px){

.ok-title{

font-size:38px;

}

.ok-heading{

font-size:28px;

}

.ok-card{

padding:25px;

}

.ok-section{

padding:60px 0;

}

}

/* ======================================================
HEADER
====================================================== */

.ok-header{

position:sticky;
top:0;
z-index:999;

background:#ffffffee;

backdrop-filter:blur(12px);

border-bottom:1px solid #e2e8f0;

}

.ok-nav{

display:flex;
align-items:center;
justify-content:space-between;

min-height:80px;

gap:20px;

}

.ok-logo{

font-size:28px;
font-weight:800;

color:#0f172a;

text-decoration:none;

}

.ok-menu{

display:flex;
align-items:center;
gap:30px;

}

.ok-menu a{

text-decoration:none;

font-weight:600;

color:#334155;

transition:0.3s;

}

.ok-menu a:hover{

color:#16a34a;

}

.ok-nav-cta{

display:flex;
align-items:center;
gap:15px;

}

/* MOBILE */

@media(max-width:768px){

.ok-nav{

flex-wrap:wrap;

padding:15px 0;

}

.ok-menu{

width:100%;

justify-content:center;

gap:20px;

font-size:14px;

}

.ok-nav-cta{

width:100%;

justify-content:center;

}

}

/* ======================================================
FORM
====================================================== */

.ok-form-group{

margin-bottom:25px;

}

.ok-form-group label{

display:block;

margin-bottom:10px;

font-weight:700;

color:#0f172a;

}

.ok-form-group input,
.ok-form-group textarea{

width:100%;

padding:14px 16px;

border:1px solid #cbd5e1;

border-radius:14px;

font-size:16px;

box-sizing:border-box;

background:#fff;

}

.ok-form-group input:focus,
.ok-form-group textarea:focus{

outline:none;

border-color:#16a34a;

box-shadow:
0 0 0 4px rgba(22,163,74,0.1);

}

/* ======================================================
VENDOR PAGE
====================================================== */

.ok-vendor-hero{

display:grid;

grid-template-columns:
1.1fr 0.9fr;

gap:50px;

align-items:center;

}

.ok-vendor-image img{

width:100%;

border-radius:20px;

display:block;

box-shadow:
0 20px 40px rgba(0,0,0,0.1);

}

.ok-list{

padding-left:20px;

line-height:2;

color:#475569;

}

@media(max-width:768px){

.ok-vendor-hero{

grid-template-columns:1fr;

}

}

/* ======================================================
VENDOR NOTICE
====================================================== */

.ok-vendor-notice{

margin-top:20px;

padding:18px 20px;

background:#fef3c7;

border:1px solid #facc15;

border-radius:14px;

font-size:15px;

line-height:1.7;

color:#92400e;

}

/* ======================================================
FOOTER
====================================================== */

.ok-footer-links{

display:flex;
justify-content:center;
gap:20px;

padding:30px 0;

}

.ok-footer-links a{

text-decoration:none;
font-weight:600;
color:#475569;

}

.ok-footer-links a:hover{

color:#16a34a;

}

/* ======================================================
BREADCRUMB
====================================================== */

.ok-breadcrumb{

display:flex;
flex-wrap:wrap;
gap:10px;

font-size:14px;

margin-bottom:20px;

color:#64748b;

}

.ok-breadcrumb a{

text-decoration:none;

color:#64748b;

}

.ok-breadcrumb a:hover{

color:#16a34a;

}

/* ======================================================
FOOTER SEO
====================================================== */

.ok-footer-seo{

padding:40px 0;

text-align:center;

font-size:14px;

color:#64748b;

}

/* ======================================================
HEADER
====================================================== */

.ok-header{

position:sticky;

top:0;

z-index:999;

background:#ffffff;

border-bottom:1px solid #e2e8f0;

backdrop-filter:blur(10px);

}

.ok-header-wrap{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 20px;

}

.ok-logo{

font-size:24px;

font-weight:800;

text-decoration:none;

color:#0f172a;

}

.ok-nav{

display:flex;

gap:25px;

}

.ok-nav a{

text-decoration:none;

font-weight:600;

color:#475569;

transition:0.2s;

}

.ok-nav a:hover{

color:#16a34a;

}

@media(max-width:768px){

.ok-nav{

gap:15px;

font-size:14px;

}

.ok-logo{

font-size:20px;

}

}

/* ======================================================
FOOTER PROFESSIONAL
====================================================== */

.ok-footer{

margin-top:80px;

padding:60px 0 30px;

background:#0f172a;

color:#cbd5e1;

}

.ok-footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr;

gap:40px;

}

.ok-footer h3,
.ok-footer h4{

color:#fff;

margin-bottom:15px;

}

.ok-footer ul{

list-style:none;

padding:0;

margin:0;

}

.ok-footer li{

margin-bottom:12px;

}

.ok-footer a{

text-decoration:none;

color:#cbd5e1;

}

.ok-footer a:hover{

color:#22c55e;

}

.ok-footer-bottom{

margin-top:40px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,0.1);

text-align:center;

font-size:14px;

}

@media(max-width:768px){

.ok-footer-grid{

grid-template-columns:1fr;

}

}

/* ======================================================
HOMEPAGE
====================================================== */

.ok-home-hero{

padding:100px 0;

background:
linear-gradient(
135deg,
#f8fafc,
#e2e8f0
);

}

.ok-home-grid{

display:grid;

grid-template-columns:
1.2fr 0.8fr;

gap:50px;

align-items:center;

}

.ok-home-badge{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:#dcfce7;

color:#166534;

font-weight:700;

margin-bottom:20px;

}

.ok-home-title{

font-size:56px;

line-height:1.1;

font-weight:800;

margin-bottom:25px;

color:#0f172a;

}

.ok-home-subtitle{

font-size:20px;

line-height:1.8;

color:#475569;

margin-bottom:35px;

}

.ok-home-actions{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.ok-btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 26px;

border-radius:12px;

border:2px solid #16a34a;

text-decoration:none;

font-weight:700;

color:#16a34a;

}

.ok-home-card{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:
0 20px 50px rgba(0,0,0,0.08);

}

.ok-home-list{

list-style:none;

padding:0;

margin:20px 0 0;

}

.ok-home-list li{

margin-bottom:15px;

}

.ok-home-list a{

text-decoration:none;

font-weight:600;

color:#0f172a;

}

.ok-home-list a:hover{

color:#16a34a;

}

@media(max-width:768px){

.ok-home-grid{

grid-template-columns:1fr;

}

.ok-home-title{

font-size:38px;

}

}

/* ======================================================
AUTHORITY
====================================================== */

.ok-authority-wrap{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;

}

.ok-authority-item{

background:#fff;

padding:40px 20px;

border-radius:24px;

text-align:center;

box-shadow:
0 20px 50px rgba(0,0,0,0.08);

}

.ok-authority-number{

font-size:42px;

font-weight:800;

color:#16a34a;

margin-bottom:10px;

}

.ok-authority-label{

font-size:16px;

font-weight:600;

color:#475569;

}

@media(max-width:768px){

.ok-authority-wrap{

grid-template-columns:
1fr 1fr;

}

}