/* =============================================================
   CJ V10 — TEMA 2 / PREMIUM KURUMSAL
   Araç kartı #2 ile tüm KOC RENT yüzeylerini aynı görsel dile bağlar.
   Bu dosya custom.css'ten SONRA yüklenmelidir.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --accent:#D71920;
  --accent-dark:#B60E16;
  --accent-deep:#8E0B12;
  --accent-soft:#FFF0F1;
  --accent-soft-2:#FFF7F7;
  --text-primary:#15171B;
  --text-secondary:#667085;
  --bg-light:#F5F6F8;
  --surface:#FFFFFF;
  --line:#E7E9EE;
  --dark:#111318;
  --dark-2:#1A1D23;
  --radius:18px;
  --shadow:0 14px 38px rgba(17,24,39,.09);
  --shadow-hover:0 22px 54px rgba(17,24,39,.15);
}

html{scroll-behavior:smooth;background:var(--bg-light)}
body.th-premium{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-light);color:var(--text-primary)}
h1,h2,h3,.section-title,.page-header h1,.vehicle-card-body h3,.vehicle-detail-info h1,.footer-col h4{font-family:'Montserrat',sans-serif;letter-spacing:-.03em}
.container{max-width:1180px}

/* ---------- TOP BAR + HEADER ---------- */
.top-bar{
  background:var(--dark)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.79rem;
}
.top-bar-content{min-height:36px;gap:20px}
.top-bar-content span,.top-bar-content a{color:rgba(255,255,255,.88)!important}
.top-bar-content svg{color:#ff5058;stroke:#ff5058}
.site-header{
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid #eceef2;
  box-shadow:0 5px 22px rgba(17,24,39,.045);
  position:sticky;top:0;z-index:1000;
}
.header-inner{min-height:72px}
.text-logo::before{color:#111318!important;letter-spacing:-.045em}
.text-logo::after{color:var(--accent)!important}
.nav-menu{gap:4px}
.nav-menu a{
  position:relative;color:#3d424b!important;font-weight:700!important;
  padding:11px 13px!important;border-radius:10px;transition:.2s ease;
}
.nav-menu a:hover{color:var(--accent)!important;background:#fff3f4}
.nav-menu a.active{color:var(--accent)!important;background:#fff0f1}
.nav-menu a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:var(--accent)}
.header-actions .btn,.header-actions .btn-icon{border-radius:999px!important}
.btn-call-header{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 8px 20px rgba(215,25,32,.18)}
.btn-whatsapp-header{background:#fff!important;color:#1c9f57!important;border:1px solid #dcebe3!important}

/* ---------- BUTTON SYSTEM ---------- */
.btn{border-radius:12px!important;font-weight:800!important;letter-spacing:-.01em;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-accent{background:linear-gradient(135deg,#eb2932,var(--accent))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 9px 20px rgba(215,25,32,.18)}
.btn-primary:hover,.btn-accent:hover{background:linear-gradient(135deg,var(--accent),var(--accent-dark))!important;box-shadow:0 12px 26px rgba(215,25,32,.25)}
.btn-outline{background:#fff!important;color:var(--accent)!important;border:1.5px solid var(--accent)!important}
.btn-outline:hover{background:#fff3f4!important}
.btn-whatsapp{background:linear-gradient(135deg,#eb2932,var(--accent))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 9px 20px rgba(215,25,32,.18)}
.btn-whatsapp:hover{background:linear-gradient(135deg,var(--accent),var(--accent-dark))!important}

/* ---------- HERO ---------- */
.hero{
  min-height:520px!important;text-align:left!important;position:relative;overflow:hidden;
  display:flex;align-items:center;border-bottom:1px solid #eceef2;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,14,18,.88) 0%,rgba(15,17,22,.76) 43%,rgba(215,25,32,.42) 74%,rgba(215,25,32,.12) 100%);
}
.hero::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(180deg,#ff3b43,var(--accent),var(--accent-dark));
}
.hero .container{position:relative;z-index:2}
.hero-content{
  max-width:650px!important;padding:38px 38px 34px!important;border:1px solid rgba(255,255,255,.13);
  border-radius:24px;background:rgba(17,19,24,.54);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.hero h1{font-size:clamp(2.35rem,5vw,4.5rem)!important;line-height:.98!important;color:#fff!important;margin-bottom:18px!important}
.hero h1 span{color:#ff4a52!important;filter:none!important}
.hero p{color:rgba(255,255,255,.86)!important;font-size:1.05rem!important;line-height:1.7!important;max-width:600px}
.hero-actions{gap:12px!important;margin-top:25px!important}
.hero-actions .btn{min-height:48px;padding:13px 20px!important}

/* ---------- GENERAL SECTIONS ---------- */
.section{padding:68px 0}
.section:nth-of-type(even){background:#fff}
.section-title{font-size:clamp(1.8rem,3vw,2.6rem);color:#14161a;margin-bottom:30px!important;position:relative}
.section-title::after{content:"";display:block;width:54px;height:4px;border-radius:4px;background:var(--accent);margin:12px auto 0}
.page-header{
  background:linear-gradient(120deg,#111318 0%,#1b1e24 64%,#7b0e14 100%)!important;
  border-top:4px solid var(--accent);padding:54px 0!important;color:#fff;
}
.page-header::before{display:none!important}
.page-header h1{color:#fff!important;font-size:clamp(2rem,4vw,3.25rem)!important}
.page-header p{color:rgba(255,255,255,.72)!important}
.page-content{background:#fff;border:1px solid #e9ebef;border-radius:20px;box-shadow:var(--shadow);padding:34px!important}
.info-box{background:#fff!important;border:1px solid #e8eaef!important;border-left:4px solid var(--accent)!important;border-radius:16px!important;box-shadow:0 10px 26px rgba(17,24,39,.06)!important}

/* USP / feature cards */
.feature-badges{gap:12px!important}
.feature-badge{background:#fff!important;color:#343943!important;border:1px solid #e9ebef!important;border-radius:999px!important;box-shadow:0 8px 22px rgba(17,24,39,.055)!important}
.feature-badge svg{color:var(--accent)!important;stroke:var(--accent)!important}
.feature-cards{gap:18px!important}
.feature-card{
  background:#fff!important;border:1px solid #e8eaee!important;border-radius:18px!important;
  box-shadow:0 10px 30px rgba(17,24,39,.07)!important;transition:.2s ease!important;
}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(17,24,39,.11)!important;border-color:#f2c6ca!important}
.feature-card .icon{background:#fff0f1!important;color:var(--accent)!important;border:1px solid #ffd9dc}
.feature-card h3{color:#17191d!important}

/* ---------- FILTERS ---------- */
.filter-bar{background:#fff!important;border:1px solid #e8eaef!important;border-radius:20px!important;box-shadow:var(--shadow)!important;padding:16px!important}
.filter-group label{color:#555e6c!important;font-weight:800!important;font-size:.76rem!important;text-transform:uppercase;letter-spacing:.04em}
.filter-group select,.form-control{background:#fff!important;border:1px solid #dfe3e8!important;border-radius:12px!important;min-height:45px!important;box-shadow:none!important}
.filter-group select:focus,.form-control:focus{border-color:#ef8a8f!important;box-shadow:0 0 0 3px rgba(215,25,32,.09)!important;outline:none}
.filter-toggle,.btn-reset{border-radius:12px!important}

/* =============================================================
   ARAÇ KARTI — TEMA 2 / DİKEY PREMIUM KURUMSAL
   ============================================================= */
.vehicle-grid,
.vehicle-grid.layout-compact,
.vehicle-grid.layout-grid3,
.vehicle-grid.layout-grid4{
  background:transparent!important;padding:0!important;border-radius:0!important;
  gap:22px!important;align-items:stretch!important;
}
.vehicle-card{
  background:#fff!important;border:1px solid #e7e9ed!important;border-radius:22px!important;
  overflow:hidden!important;box-shadow:0 13px 36px rgba(17,24,39,.09)!important;
  display:flex!important;flex-direction:column!important;position:relative!important;min-height:565px!important;
  transform:none!important;backdrop-filter:none!important;
}
.vehicle-card:hover{transform:translateY(-5px)!important;box-shadow:0 22px 52px rgba(17,24,39,.15)!important;border-color:#efbcc0!important;background:#fff!important}
.vehicle-card::after{content:""!important;display:block!important;height:5px!important;background:linear-gradient(90deg,var(--accent-dark),#f2353e,var(--accent))!important;order:999!important}
.vehicle-card-image{
  height:235px!important;min-height:235px!important;padding:0!important;overflow:hidden!important;
  border-radius:0!important;background:#17191e!important;border-bottom:0!important;position:relative!important;
}
.vehicle-card-image::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,16,.03) 48%,rgba(10,12,16,.28) 100%);
}
.vehicle-card-image::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:4px!important;background:var(--accent)!important;z-index:2!important}
.vehicle-card-image img{width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important;transform:none!important;transition:transform .35s ease!important}
.vehicle-card:hover .vehicle-card-image img{transform:scale(1.025)!important}
.vehicle-card-badges{top:14px!important;left:14px!important;right:auto!important;z-index:4!important;gap:7px!important}
.badge{padding:7px 12px!important;border-radius:999px!important;font-size:.7rem!important;font-weight:850!important;box-shadow:0 5px 14px rgba(0,0,0,.10)!important}
.badge-category{background:linear-gradient(135deg,#ef3039,var(--accent))!important;color:#fff!important;border:0!important}
.badge-insurance{background:rgba(255,255,255,.95)!important;color:#a90f16!important;border:1px solid rgba(255,255,255,.8)!important;backdrop-filter:blur(7px)}
.vehicle-card-body{padding:18px 17px 15px!important;display:flex!important;flex-direction:column!important;flex:1!important;background:#fff!important}
.vehicle-card-body h3{font-size:1.16rem!important;line-height:1.22!important;margin:0 0 13px!important;color:#17191d!important;font-weight:850!important}
.vehicle-specs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px 6px!important;margin:0 0 15px!important;color:#727a87!important;font-size:.75rem!important}
.vehicle-specs span,.vehicle-specs .spec-item{gap:5px!important;min-width:0!important;white-space:nowrap!important}
.vehicle-specs svg,.vehicle-specs .spec-icon svg{width:16px!important;height:16px!important;color:var(--accent)!important;stroke:var(--accent)!important}
.vehicle-price-boxes{display:grid!important;grid-template-columns:1.18fr .92fr!important;gap:8px!important;margin:0 0 12px!important}
.price-box{min-height:78px!important;border-radius:15px!important;padding:11px 12px!important;border:1px solid #eceef2!important;background:#f8f9fa!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important;transform:none!important}
.price-box .price-box-label{font-size:.67rem!important;line-height:1.05!important;letter-spacing:.04em!important;text-transform:uppercase!important;font-weight:850!important}
.price-box .price-box-value{font-size:1.18rem!important;line-height:1.08!important;font-weight:900!important;letter-spacing:-.035em!important}
.price-box.price-box-monthly{background:linear-gradient(135deg,#e82b34 0%,var(--accent) 62%,var(--accent-dark) 100%)!important;border:0!important;box-shadow:0 9px 22px rgba(215,25,32,.22)!important}
.price-box.price-box-monthly .price-box-label,.price-box.price-box-monthly .price-box-value{color:#fff!important}
.price-box.price-box-monthly .price-box-value{font-size:1.31rem!important}
.price-box-badge{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:none!important;animation:none!important}
.price-box.price-box-highlight{background:linear-gradient(180deg,#fff9f9,#fff1f2)!important;border:1px solid #f6d7d9!important}
.price-box.price-box-highlight .price-box-label{color:#a9141b!important}
.price-box.price-box-highlight .price-box-value{color:var(--accent)!important;font-size:1.28rem!important}
.price-box.price-box-deposit{grid-column:1/-1!important;min-height:43px!important;padding:9px 12px!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;border:1px solid #e5e8ec!important;background:#f5f6f8!important;border-radius:13px!important}
.price-box.price-box-deposit .price-box-label{color:#68717f!important}
.price-box.price-box-deposit .price-box-value{color:#5d6673!important;font-size:.98rem!important}
.deposit-info-btn{width:17px!important;height:17px!important;background:var(--accent)!important;color:#fff!important;font-size:10px!important}
.vehicle-card-actions{display:grid!important;grid-template-columns:1fr 1.08fr!important;gap:8px!important;margin-top:auto!important}
.vehicle-card-actions .btn{min-height:44px!important;padding:9px 8px!important;border-radius:999px!important;font-size:.78rem!important;font-weight:850!important;box-shadow:none!important}
.vehicle-card-actions .btn-outline{background:#fff!important;color:var(--accent)!important;border:1.6px solid var(--accent)!important}
.vehicle-card-actions .btn-whatsapp,.vehicle-card-actions .btn-primary{background:linear-gradient(135deg,#ea2932,var(--accent))!important;color:#fff!important;border:0!important;box-shadow:0 8px 18px rgba(215,25,32,.18)!important}
.cj-card-trust{
  display:flex!important;justify-content:space-between!important;gap:4px!important;align-items:center!important;
  margin:11px -17px -15px!important;padding:10px 14px!important;border-top:1px solid #eceef2!important;
  background:#fafafb!important;color:#7f8792!important;font-size:.59rem!important;font-weight:800!important;letter-spacing:.01em!important;
}
.cj-card-trust span{display:inline-flex!important;gap:3px!important;align-items:center!important;white-space:nowrap!important}
.cj-card-trust span+span::before{content:"•"!important;color:#d2d5da!important;margin-right:3px!important}

/* ---------- VEHICLE DETAIL ---------- */
.vehicle-detail{
  gap:28px!important;align-items:start!important;background:transparent!important;
}
.vehicle-detail-image{
  background:#fff!important;border:1px solid #e7e9ed!important;border-radius:22px!important;overflow:hidden!important;
  box-shadow:var(--shadow)!important;padding:0!important;position:relative!important;
}
.vehicle-detail-image::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent)}
.vehicle-detail-image img{width:100%!important;min-height:410px!important;object-fit:cover!important}
.vehicle-detail-info{
  background:#fff;border:1px solid #e7e9ed;border-radius:22px;box-shadow:var(--shadow);padding:27px!important;
}
.vehicle-detail-info h1{font-size:2rem!important;color:#17191d!important;margin-bottom:5px!important}
.vehicle-detail-brand{color:var(--accent)!important;text-transform:uppercase!important;font-weight:850!important;letter-spacing:.08em!important;font-size:.75rem!important}
.vehicle-detail-badges{margin:14px 0!important}
.specs-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin:18px 0!important}
.specs-grid .spec-item{background:#f7f8fa!important;border:1px solid #e8eaee!important;border-radius:13px!important;padding:11px!important;box-shadow:none!important}
.specs-grid .spec-icon{color:var(--accent)!important}
.specs-grid .spec-label{color:#7b8492!important;font-size:.68rem!important;text-transform:uppercase!important;font-weight:800!important}
.specs-grid .spec-value{color:#1b1e23!important;font-weight:850!important}
.vehicle-detail-info>.vehicle-price-boxes{margin-top:18px!important}
.vehicle-detail-actions{display:grid!important;grid-template-columns:1fr 1.08fr!important;gap:10px!important;margin-top:14px!important}
.vehicle-detail-actions .btn{min-height:48px!important;border-radius:999px!important}
.vehicle-detail-features{background:#fff!important;border:1px solid #e8eaee!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(17,24,39,.06)!important;padding:24px!important;margin-top:25px!important}
.vehicle-detail-features h3{color:#17191d!important}
.vehicle-detail-features ul li::marker{color:var(--accent)}

/* ---------- CONTACT / FAQ / LEGAL ---------- */
.contact-grid{gap:24px!important}
.contact-info-item{background:#fff!important;border:1px solid #e7e9ed!important;border-radius:16px!important;box-shadow:0 9px 24px rgba(17,24,39,.06)!important;padding:18px!important}
.contact-info-item svg{color:var(--accent)!important;stroke:var(--accent)!important}
.form-group label{font-weight:800!important;color:#4c5562!important}
.accordion-item{background:#fff!important;border:1px solid #e6e8ed!important;border-radius:15px!important;overflow:hidden!important;box-shadow:0 8px 24px rgba(17,24,39,.05)!important;margin-bottom:11px!important}
.accordion-header{font-weight:800!important;color:#1f2227!important;background:#fff!important}
.accordion-header:hover{background:#fff7f7!important;color:var(--accent)!important}
.accordion-icon{color:var(--accent)!important}
.stats-grid{gap:16px!important}
.stat-item{background:#fff!important;border:1px solid #e7e9ed!important;border-radius:18px!important;box-shadow:0 9px 26px rgba(17,24,39,.06)!important}
.stat-item .number{color:var(--accent)!important}

/* ---------- CTA ---------- */
.cta-section{
  background:linear-gradient(120deg,#111318 0%,#24262c 48%,#8f0e15 100%)!important;
  border-top:4px solid var(--accent)!important;color:#fff!important;position:relative;overflow:hidden;
}
.cta-section::after{content:"";position:absolute;right:-90px;top:-120px;width:330px;height:330px;border-radius:50%;background:rgba(215,25,32,.20)}
.cta-section .container{position:relative;z-index:2}
.cta-section h2,.cta-section h3{color:#fff!important}
.cta-section p{color:rgba(255,255,255,.76)!important}

/* ---------- FOOTER ---------- */
.site-footer{background:#101216!important;border-top:1px solid rgba(255,255,255,.07)!important;padding-top:54px!important}
.site-footer .text-logo::before{color:#fff!important}
.site-footer .text-logo::after{color:#ff6269!important}
.footer-col h4{color:#fff!important;font-size:1rem!important}
.footer-col p,.footer-contact-item,.footer-col ul li a{color:#aeb4bf!important}
.footer-col ul li a:hover{color:#fff!important}
.footer-social a{background:#1c1f25!important;border:1px solid #2a2e36!important;color:#fff!important}
.footer-social a:hover{background:var(--accent)!important;border-color:var(--accent)!important}
.footer-bottom{border-top:1px solid #262a31!important;color:#888f9b!important}
.footer-bottom-links a{color:#9aa1ac!important}
.footer-bottom-links a:hover{color:#fff!important}

/* ---------- FLOATING ACTIONS ---------- */
.floating-btn{box-shadow:0 12px 30px rgba(17,24,39,.20)!important;border:2px solid rgba(255,255,255,.9)!important}
.floating-btn-call{background:var(--accent)!important}
.floating-btn-whatsapp{background:#22b861!important}

/* ---------- MODALS ---------- */
.deposit-modal{border-radius:20px!important;box-shadow:0 30px 90px rgba(0,0,0,.25)!important;border:1px solid #eceef2!important}
.deposit-modal-close{background:#fff0f1!important;color:var(--accent)!important}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .vehicle-grid.layout-grid4{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .vehicle-detail-image img{min-height:360px!important}
}
@media(max-width:820px){
  .hero{min-height:470px!important}
  .hero-content{padding:28px 25px!important}
  .vehicle-grid,.vehicle-grid.layout-compact,.vehicle-grid.layout-grid3,.vehicle-grid.layout-grid4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important}
  .vehicle-card{min-height:545px!important}
  .vehicle-card-image{height:215px!important;min-height:215px!important}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vehicle-detail-info{padding:22px!important}
}
@media(max-width:560px){
  .section{padding:46px 0}
  .hero{min-height:440px!important}
  .hero-content{margin:0 8px!important;padding:24px 20px!important;border-radius:20px!important}
  .hero h1{font-size:2.35rem!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .vehicle-grid,.vehicle-grid.layout-compact,.vehicle-grid.layout-grid3,.vehicle-grid.layout-grid4{grid-template-columns:1fr!important;gap:17px!important}
  .vehicle-card{max-width:410px!important;margin-inline:auto!important;min-height:570px!important}
  .vehicle-card-image{height:238px!important;min-height:238px!important}
  .vehicle-card-body{padding:17px!important}
  .cj-card-trust{margin:11px -17px -17px!important}
  .vehicle-detail-image img{min-height:280px!important}
  .vehicle-detail-info{padding:18px!important}
  .vehicle-detail-info h1{font-size:1.6rem!important}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vehicle-detail-actions{grid-template-columns:1fr!important}
  .page-content{padding:22px!important}
}