/* =============================================================
   CJ V11 — TEMA 2.1 / PREMIUM KURUMSAL MODERN + MOBILE FIRST
   V10 tema2 üzerine son katman. Amaç: daha hafif, modern,
   kompakt kartlar ve 320px–1440px arası güvenli responsive yapı.
   ============================================================= */
:root{
  --accent:#D71920;
  --accent-dark:#B90E15;
  --accent-soft:#FFF4F5;
  --surface:#FFFFFF;
  --surface-2:#F8F9FB;
  --ink:#15171A;
  --muted:#737B87;
  --line:#E8EBEF;
  --soft-shadow:0 8px 26px rgba(20,24,32,.07);
  --hover-shadow:0 16px 36px rgba(20,24,32,.11);
  --card-radius:18px;
}

html{overflow-x:hidden}
body.th-premium{background:#F7F8FA!important;color:var(--ink);overflow-x:hidden}
.container{width:min(100% - 40px,1180px)!important;padding:0!important}

/* Header: daha ince, kurumsal, mobilde alan yemeyen yapı */
.top-bar{font-size:.74rem!important}
.top-bar-content{min-height:32px!important}
.site-header{box-shadow:0 3px 16px rgba(20,24,32,.045)!important}
.header-inner{min-height:66px!important;padding-top:8px!important;padding-bottom:8px!important}
.text-logo::before{font-size:1.22rem!important;letter-spacing:-.04em!important}
.text-logo::after{font-size:.57rem!important;letter-spacing:.17em!important;margin-top:4px!important}
.nav-menu a{font-size:.88rem!important;padding:9px 11px!important;border-radius:9px!important}

/* Hero: ağır cam kutu yerine daha temiz premium poster */
.hero{min-height:455px!important}
.hero::before{background:linear-gradient(90deg,rgba(9,11,15,.87) 0%,rgba(11,13,17,.72) 48%,rgba(215,25,32,.25) 100%)!important}
.hero-content{
  max-width:610px!important;
  padding:12px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
.hero h1{font-size:clamp(2.25rem,4.7vw,4rem)!important;line-height:1.02!important;margin-bottom:15px!important;text-wrap:balance}
.hero p{max-width:570px!important;font-size:1rem!important;line-height:1.65!important;color:rgba(255,255,255,.82)!important}
.hero-actions{margin-top:22px!important}
.hero-actions .btn{min-height:46px!important;padding:11px 18px!important}

/* Genel yüzeyler */
.section{padding:56px 0!important}
.section-title{font-size:clamp(1.65rem,2.6vw,2.25rem)!important;margin-bottom:25px!important}
.section-title::after{width:42px!important;height:3px!important;margin-top:9px!important}
.page-header{padding:44px 0!important;border-top-width:3px!important}
.page-content{padding:28px!important;border-radius:18px!important;box-shadow:var(--soft-shadow)!important}
.feature-badges{gap:10px!important}
.feature-badge{padding:10px 15px!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(20,24,32,.045)!important;font-size:.83rem!important}
.feature-card{border-radius:16px!important;box-shadow:var(--soft-shadow)!important}
.filter-bar{border-radius:16px!important;padding:13px!important;box-shadow:var(--soft-shadow)!important}

/* ==================== ARAÇ KARTI 2.1 ==================== */
.vehicle-grid,
.vehicle-grid.layout-compact,
.vehicle-grid.layout-grid3,
.vehicle-grid.layout-grid4{
  gap:18px!important;
  align-items:stretch!important;
}
.vehicle-card{
  min-height:0!important;
  border-radius:var(--card-radius)!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--soft-shadow)!important;
  background:#fff!important;
  isolation:isolate;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
.vehicle-card:hover{transform:translateY(-3px)!important;box-shadow:var(--hover-shadow)!important;border-color:#F0C8CB!important}
.vehicle-card::after{height:3px!important;background:var(--accent)!important}
.vehicle-card-image{
  height:188px!important;
  min-height:188px!important;
  background:#ECEFF2!important;
}
.vehicle-card-image::before{background:linear-gradient(180deg,transparent 60%,rgba(12,14,18,.16) 100%)!important}
.vehicle-card-image::after{height:2px!important;background:rgba(215,25,32,.8)!important}
.vehicle-card-image img{object-fit:cover!important;transition:transform .3s ease!important}
.vehicle-card:hover .vehicle-card-image img{transform:scale(1.015)!important}
.vehicle-card-badges{top:11px!important;left:11px!important;gap:6px!important}
.badge{padding:5px 9px!important;font-size:.65rem!important;box-shadow:0 3px 10px rgba(0,0,0,.08)!important}

.vehicle-card-body{padding:15px 14px 13px!important}
.vehicle-card-body h3{
  font-size:1rem!important;
  line-height:1.22!important;
  margin:0 0 10px!important;
  letter-spacing:-.025em!important;
}
.vehicle-specs{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px 5px!important;
  margin-bottom:12px!important;
  font-size:.69rem!important;
  color:#747D89!important;
}
.vehicle-specs span,.vehicle-specs .spec-item{justify-content:flex-start!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;gap:4px!important}
.vehicle-specs svg,.vehicle-specs .spec-icon svg{width:14px!important;height:14px!important;flex:0 0 14px!important}

.vehicle-price-boxes{grid-template-columns:1.12fr .88fr!important;gap:7px!important;margin-bottom:10px!important}
.price-box{
  min-height:65px!important;
  padding:9px 10px!important;
  border-radius:12px!important;
  gap:3px!important;
}
.price-box .price-box-label{font-size:.59rem!important;letter-spacing:.045em!important}
.price-box .price-box-value{font-size:1.02rem!important;line-height:1.05!important}
.price-box.price-box-monthly{box-shadow:none!important;background:linear-gradient(135deg,#E9262F,#C9151D)!important}
.price-box.price-box-monthly .price-box-value{font-size:1.13rem!important}
.price-box-badge{font-size:.54rem!important;padding:2px 5px!important;border-radius:6px!important}
.price-box.price-box-highlight{background:#FFF6F7!important;border-color:#F4DEE0!important}
.price-box.price-box-highlight .price-box-value{font-size:1.11rem!important}
.price-box.price-box-deposit{
  min-height:36px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  background:#F7F8FA!important;
}
.price-box.price-box-deposit .price-box-value{font-size:.88rem!important}
.deposit-info-btn{width:15px!important;height:15px!important;font-size:9px!important}

.vehicle-card-actions{gap:7px!important}
.vehicle-card-actions .btn{
  min-height:40px!important;
  padding:8px 7px!important;
  font-size:.72rem!important;
  border-radius:10px!important;
}
.vehicle-card-actions .btn-outline{border-width:1.2px!important}
.vehicle-card-actions .btn-whatsapp,.vehicle-card-actions .btn-primary{box-shadow:none!important}
.cj-card-trust{
  margin:9px -14px -13px!important;
  padding:8px 11px!important;
  min-height:33px!important;
  font-size:.54rem!important;
  background:#FBFBFC!important;
}

/* Araç detayını kart diliyle aynı ama daha hafif yap */
.vehicle-detail{gap:22px!important}
.vehicle-detail-image,.vehicle-detail-info{border-radius:18px!important;box-shadow:var(--soft-shadow)!important}
.vehicle-detail-image img{min-height:355px!important;max-height:520px!important;object-fit:cover!important}
.vehicle-detail-info{padding:23px!important}
.vehicle-detail-info h1{font-size:1.75rem!important}
.specs-grid{gap:7px!important;margin:14px 0!important}
.specs-grid .spec-item{border-radius:11px!important;padding:9px!important}
.vehicle-detail-features{border-radius:15px!important;box-shadow:var(--soft-shadow)!important;padding:20px!important}

/* Formlar, FAQ, CTA, footer: aynı görsel dil */
.contact-info-item,.accordion-item,.stat-item{border-radius:14px!important;box-shadow:0 6px 20px rgba(20,24,32,.045)!important}
.cta-section{border-top-width:3px!important}
.site-footer{padding-top:44px!important}
.floating-btn{box-shadow:0 8px 22px rgba(20,24,32,.18)!important;border-width:1px!important}

/* ==================== TABLET ==================== */
@media (max-width: 980px){
  .container{width:min(100% - 32px,920px)!important}
  .vehicle-grid,.vehicle-grid.layout-compact,.vehicle-grid.layout-grid3,.vehicle-grid.layout-grid4{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .vehicle-card-image{height:180px!important;min-height:180px!important}
  .vehicle-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ==================== MOBILE / SMALL TABLET ==================== */
@media (max-width: 768px){
  body.th-premium{font-size:15px!important}
  .container{width:min(100% - 28px,720px)!important}
  .top-bar{display:none!important}
  .site-header{top:0!important}
  .header-inner{min-height:60px!important;padding:7px 14px!important}
  .text-logo::before{font-size:1.08rem!important}
  .text-logo::after{font-size:.49rem!important;letter-spacing:.14em!important}
  .hamburger{width:42px!important;height:42px!important;border:1px solid #E7E9ED!important;border-radius:12px!important;background:#fff!important;align-items:center!important;justify-content:center!important;gap:4px!important}
  .hamburger span{width:18px!important;height:2px!important;background:#24272D!important;border-radius:3px!important}
  .nav-menu{
    top:68px!important;bottom:auto!important;left:14px!important;right:14px!important;
    height:auto!important;max-height:calc(100dvh - 84px)!important;
    padding:12px!important;gap:4px!important;align-items:stretch!important;justify-content:flex-start!important;
    border:1px solid #E6E8ED!important;border-radius:16px!important;background:rgba(255,255,255,.98)!important;
    box-shadow:0 20px 55px rgba(20,24,32,.16)!important;overflow:auto!important;
  }
  .nav-menu a{font-size:.93rem!important;padding:12px 13px!important;border-radius:10px!important;text-align:left!important}
  .nav-menu a.active::after{display:none!important}

  .hero{min-height:390px!important;padding:42px 0!important;background-position:center!important}
  .hero::after{width:4px!important}
  .hero-content{padding:0!important;margin:0!important;max-width:540px!important}
  .hero h1{font-size:clamp(2rem,9vw,2.8rem)!important;line-height:1.04!important;margin-bottom:13px!important}
  .hero p{font-size:.91rem!important;line-height:1.55!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:18px!important}
  .hero-actions .btn{width:100%!important;min-width:0!important;min-height:43px!important;padding:9px 10px!important;font-size:.78rem!important}

  .section{padding:40px 0!important}
  .section-title{font-size:1.45rem!important;margin-bottom:20px!important}
  .feature-badges{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .feature-badge{padding:9px 7px!important;justify-content:center!important;text-align:center!important;font-size:.68rem!important;border-radius:12px!important}
  .feature-badge svg{width:17px!important;height:17px!important;flex:0 0 17px!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:12px!important;
  }
  .vehicle-card{border-radius:16px!important;max-width:none!important;margin:0!important}
  .vehicle-card-image{height:160px!important;min-height:160px!important}
  .vehicle-card-body{padding:12px 11px 11px!important}
  .vehicle-card-body h3{font-size:.9rem!important;margin-bottom:8px!important}
  .vehicle-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px 4px!important;font-size:.62rem!important;margin-bottom:9px!important}
  .vehicle-specs svg,.vehicle-specs .spec-icon svg{width:13px!important;height:13px!important;flex-basis:13px!important}
  .vehicle-price-boxes{grid-template-columns:1fr!important;gap:6px!important;margin-bottom:8px!important}
  .price-box{min-height:50px!important;padding:8px 9px!important}
  .price-box.price-box-monthly,.price-box.price-box-highlight{flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
  .price-box.price-box-monthly .price-box-label,.price-box.price-box-highlight .price-box-label{max-width:46%!important}
  .price-box.price-box-monthly .price-box-value,.price-box.price-box-highlight .price-box-value{font-size:.98rem!important;text-align:right!important}
  .price-box.price-box-deposit{min-height:34px!important}
  .vehicle-card-actions{grid-template-columns:1fr!important;gap:6px!important}
  .vehicle-card-actions .btn{min-height:38px!important;font-size:.68rem!important;border-radius:9px!important}
  .cj-card-trust{display:none!important}

  .filter-bar{padding:11px!important;border-radius:14px!important}
  .page-header{padding:32px 0!important}
  .page-header h1{font-size:1.55rem!important}
  .page-content{padding:19px!important;border-radius:15px!important}
  .vehicle-detail{gap:14px!important}
  .vehicle-detail-image img{min-height:240px!important;max-height:360px!important}
  .vehicle-detail-info{padding:17px!important;border-radius:15px!important}
  .vehicle-detail-info h1{font-size:1.45rem!important}
  .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .vehicle-detail-actions{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .vehicle-detail-actions .btn{min-height:43px!important;font-size:.75rem!important}
  .footer-grid{gap:24px!important}
  .site-footer{padding-top:34px!important}
  .floating-buttons{right:12px!important;bottom:12px!important;gap:8px!important}
  .floating-btn{width:46px!important;height:46px!important}
}

/* ==================== PHONE ==================== */
@media (max-width: 560px){
  .container{width:min(100% - 22px,520px)!important}
  .hero{min-height:370px!important;padding:36px 0!important}
  .hero h1{font-size:clamp(1.9rem,9.4vw,2.5rem)!important}
  .hero-actions{grid-template-columns:1fr!important}
  .feature-badges{grid-template-columns:1fr!important}
  .feature-badge{justify-content:flex-start!important;text-align:left!important;padding:9px 11px!important}

  .vehicle-grid,.vehicle-grid.layout-compact,.vehicle-grid.layout-grid3,.vehicle-grid.layout-grid4{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .vehicle-card{width:100%!important;max-width:390px!important;margin-inline:auto!important;border-radius:17px!important}
  .vehicle-card-image{height:205px!important;min-height:205px!important}
  .vehicle-card-body{padding:14px!important}
  .vehicle-card-body h3{font-size:1.03rem!important;margin-bottom:9px!important}
  .vehicle-specs{grid-template-columns:repeat(3,minmax(0,1fr))!important;font-size:.68rem!important;gap:7px 4px!important;margin-bottom:11px!important}
  .vehicle-price-boxes{grid-template-columns:1.12fr .88fr!important;gap:7px!important}
  .price-box{min-height:60px!important;padding:8px 9px!important}
  .price-box.price-box-monthly,.price-box.price-box-highlight{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}
  .price-box.price-box-monthly .price-box-label,.price-box.price-box-highlight .price-box-label{max-width:100%!important}
  .price-box.price-box-monthly .price-box-value,.price-box.price-box-highlight .price-box-value{font-size:1.03rem!important;text-align:left!important}
  .price-box.price-box-deposit{min-height:35px!important}
  .vehicle-card-actions{grid-template-columns:1fr 1.06fr!important;gap:7px!important}
  .vehicle-card-actions .btn{min-height:41px!important;font-size:.72rem!important}
  .cj-card-trust{display:flex!important;margin:9px -14px -14px!important;padding:8px 10px!important;font-size:.5rem!important}

  .vehicle-detail-image img{min-height:220px!important}
  .vehicle-detail-actions{grid-template-columns:1fr!important}
  .contact-grid{gap:14px!important}
  .accordion-item{margin-bottom:8px!important}
  .footer-bottom{gap:10px!important}
}

/* Küçük telefon: 320–359px için taşma emniyeti */
@media (max-width: 359px){
  .container{width:calc(100% - 18px)!important}
  .vehicle-card{max-width:100%!important}
  .vehicle-card-image{height:186px!important;min-height:186px!important}
  .vehicle-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vehicle-price-boxes{grid-template-columns:1fr!important}
  .price-box.price-box-monthly,.price-box.price-box-highlight{flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
  .vehicle-card-actions{grid-template-columns:1fr!important}
  .cj-card-trust{display:none!important}
}

/* Dokunmatik cihazlarda hover zıplamasını kaldır */
@media (hover:none){
  .vehicle-card:hover,.feature-card:hover,.btn:hover{transform:none!important}
}

/* Erişilebilirlik / hareket azaltma */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}