/* ================================================================
   YOL GUVENLIGI SERVISI — COMPLETE STYLESHEET
   Dark theme: bg #111214, gold #f0c040, text #d8dbe2
   ================================================================ */

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#111214;color:#d8dbe2;line-height:1.7;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:#f0c040;text-decoration:none;transition:color .25s ease}
a:hover{color:#ffe07a}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.3}

/* ===== SKIP LINK ===== */
.skip-link{
  position:absolute;top:-100%;left:8px;
  background:#f0c040;color:#111214;padding:8px 16px;
  z-index:10000;font-weight:700;border-radius:0 0 4px 4px;
  transition:top .3s ease;
}
.skip-link:focus{top:0}

/* ===== UTILITY CONTAINER ===== */
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
main{flex:1}

/* ================================================================
   HEADER
   ================================================================ */
.site-header{
  background:linear-gradient(180deg,#0d0e10 0%,#181a1e 100%);
  border-bottom:2px solid rgba(240,192,64,.25);
  position:sticky;top:0;z-index:900;
  transition:box-shadow .3s ease;
}
.header-inner,
.header-container,
.site-header > .container{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1140px;margin:0 auto;padding:14px 20px;gap:16px;
  position:relative;
}

/* Logo */
.site-logo,
.logo{
  font-size:1.35rem;font-weight:700;color:#f0c040!important;
  letter-spacing:.5px;white-space:nowrap;text-decoration:none!important;
  transition:color .25s ease,opacity .25s ease;
}
.site-logo:hover,
.logo:hover{color:#ffe07a!important;opacity:.9}
.logo span{color:#d8dbe2;font-weight:400}

/* Nav */
.site-header nav{position:static}
.site-header nav ul,
.main-nav ul,
.nav-list{
  display:flex;gap:6px;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.site-header nav a,
.main-nav a{
  display:block;padding:7px 14px;border-radius:4px;
  font-size:.92rem;color:#c5c8d0;text-decoration:none!important;
  transition:background .25s ease,color .25s ease,transform .15s ease;
}
.site-header nav a:hover,
.main-nav a:hover{
  background:rgba(240,192,64,.12);color:#f0c040;transform:translateY(-1px);
}
.site-header nav a[aria-current="page"],
.main-nav a[aria-current="page"]{
  background:rgba(240,192,64,.15);color:#f0c040;
}

/* Nav toggle */
.nav-toggle{
  display:none;background:none;
  border:2px solid #f0c040;color:#f0c040;
  font-size:1.4rem;padding:8px 10px;border-radius:6px;
  cursor:pointer;line-height:1;flex-shrink:0;
  order:3;margin-left:auto;
  transition:background .25s ease,transform .15s ease;
}
.nav-toggle:hover{background:rgba(240,192,64,.1)}
.nav-toggle:active{transform:scale(.95)}
.nav-toggle-bar{
  display:block;width:22px;height:2px;background:#f0c040;
  margin:5px 0;border-radius:1px;
  transition:transform .35s ease,opacity .25s ease;
  transform-origin:center;
}
/* X animation when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){
  opacity:0;transform:scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ===== ROAD LINE ===== */
.road-line{
  height:4px;
  background:repeating-linear-gradient(90deg,#f0c040 0,#f0c040 40px,transparent 40px,transparent 70px);
  opacity:.55;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero-section,
.hero{
  position:relative;padding:80px 20px 72px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(17,18,20,.4) 0%,rgba(17,18,20,.95) 100%),
             repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(240,192,64,.04) 38px,rgba(240,192,64,.04) 40px);
}
.hero-content,
.hero .container{
  position:relative;z-index:1;max-width:820px;margin:0 auto;
}
.hero-section h1,
.hero h1{
  font-size:2.5rem;color:#fff;margin-bottom:20px;line-height:1.2;
  letter-spacing:-.5px;
}
.hero-section h1 strong,
.hero h1 strong{color:#f0c040}
.hero-subtitle,
.hero p{
  font-size:1.1rem;max-width:660px;margin:0 auto 32px;color:#a8abb4;line-height:1.8;
}
.hero-buttons,
.hero-actions{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;padding:13px 30px;border-radius:6px;
  font-weight:600;font-size:.97rem;border:none;cursor:pointer;
  text-decoration:none!important;text-align:center;
  transition:background .3s ease,color .3s ease,transform .2s ease,box-shadow .3s ease;
}
.btn:hover{text-decoration:none!important}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:#f0c040;color:#111214;
  box-shadow:0 2px 12px rgba(240,192,64,.2);
}
.btn-primary:hover{
  background:#ffe07a;color:#111214;
  box-shadow:0 4px 20px rgba(240,192,64,.35);transform:translateY(-2px);
}
.btn-outline{
  border:none;color:#f0c040;background:transparent;
  box-shadow:inset 0 0 0 2px #f0c040;
}
.btn-outline:hover{
  background:rgba(240,192,64,.1);
  box-shadow:inset 0 0 0 2px #f0c040,0 2px 12px rgba(240,192,64,.15);
}

/* ================================================================
   SECTIONS (index.html)
   ================================================================ */
.section{padding:56px 0}
.section--alt{background:#16181c}
.section-inner{max-width:1140px;margin:0 auto;padding:0 20px}
.section-title{font-size:1.7rem;color:#fff;margin-bottom:10px;text-align:center}
.section-subtitle{text-align:center;color:#9a9da6;margin-bottom:36px;max-width:600px;margin-left:auto;margin-right:auto}

.why-professional-section,
.symptom-checker-section,
.quick-price-section,
.road-texture-section{padding:64px 0}
.why-professional-section{background:#16181c}
.symptom-checker-section{background:#111214}
.quick-price-section{background:#16181c}
.road-texture-section{padding:32px 0}

/* Section headings */
.why-professional-section h2,
.symptom-checker-section h2,
.quick-price-section h2{
  font-size:1.8rem;color:#fff;margin-bottom:12px;text-align:center;
}
.symptom-checker-section > .section-inner > p,
.quick-price-section > .section-inner > p{
  text-align:center;color:#9a9da6;margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto;
}

/* ===== CARDS ===== */
.card-grid,
.cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;
}
.card{
  background:#1c1e23;border:1px solid #2a2c32;border-radius:12px;
  padding:0;overflow:hidden;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.card:hover{
  border-color:rgba(240,192,64,.4);transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.card h3{color:#f0c040;font-size:1.15rem;margin-bottom:10px}
.card p{color:#b0b3bb;font-size:.95rem;line-height:1.7}
.card img{
  width:100%;height:auto;border-radius:0;margin-bottom:0;
  aspect-ratio:16/10;object-fit:cover;
  transition:transform .4s ease;
}
.card:hover img{transform:scale(1.03)}
.card h3,
.card p{padding:0 24px}
.card h3{padding-top:20px}
.card p:last-child{padding-bottom:24px}

/* ===== ROAD TEXTURE SVG ===== */
.road-texture-svg{
  display:block;width:100%;height:auto;max-height:200px;border-radius:6px;
  opacity:.7;transition:opacity .3s ease;
}
.road-texture-svg:hover{opacity:1}

/* ===== SYMPTOM CHECKER ===== */
.symptom-checker{
  background:#1c1e23;border:1px solid #2a2c32;border-radius:12px;
  padding:32px 28px;max-width:640px;margin:0 auto;
}
.symptom-checker h3{color:#fff;margin-bottom:16px;font-size:1.2rem}

.symptom-list,
.symptom-buttons{
  display:flex;flex-direction:column;gap:10px;margin-bottom:20px;
}
.symptom-btn,
.btn-symptom{
  background:#22242a;border:2px solid #2e3038;border-radius:8px;
  padding:14px 18px;color:#d8dbe2;font-size:.95rem;cursor:pointer;
  text-align:left;font-family:inherit;width:100%;
  text-decoration:none!important;
  transition:border-color .3s ease,background .3s ease,transform .2s ease,box-shadow .3s ease;
}
.symptom-btn:hover,.symptom-btn:focus,
.btn-symptom:hover,.btn-symptom:focus{
  border-color:#f0c040;background:#28292f;outline:none;
  transform:translateX(4px);box-shadow:0 2px 12px rgba(240,192,64,.1);
}
.symptom-btn[aria-pressed="true"],
.btn-symptom[aria-pressed="true"]{
  border-color:#f0c040;background:rgba(240,192,64,.1);
  box-shadow:inset 0 0 0 1px rgba(240,192,64,.2);
}
.symptom-result{
  background:#22242a;border-radius:8px;padding:20px;min-height:60px;
  color:#b0b3bb;font-size:.95rem;border-left:4px solid transparent;line-height:1.7;
  transition:border-color .4s ease,opacity .4s ease,transform .4s ease,background .3s ease;
  opacity:0;transform:translateY(8px);
}
.symptom-result.risk-low,
.symptom-result.risk-mid,
.symptom-result.risk-high{
  opacity:1;transform:translateY(0);
}
.risk-low{border-left-color:#4caf50;background:rgba(76,175,80,.06)}
.risk-mid{border-left-color:#ff9800;background:rgba(255,152,0,.06)}
.risk-high{border-left-color:#f44336;background:rgba(244,67,54,.06)}

/* ===== TABLE WRAPPER ===== */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== PRICE TABLE ===== */
.price-table{width:100%;border-collapse:collapse;margin-top:20px}
.price-table th,
.price-table td{
  padding:14px 16px;text-align:left;border-bottom:1px solid #2a2c32;
  transition:background .2s ease;
}
.price-table th{
  color:#f0c040;font-weight:600;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.5px;
  background:rgba(240,192,64,.05);
}
.price-table td{color:#c5c8d0;font-size:.95rem}
.price-table tbody tr{transition:background .25s ease}
.price-table tbody tr:hover{background:rgba(240,192,64,.06)}
.price-note{color:#9a9da6;font-size:.88rem;margin-top:14px;font-style:italic}

/* Price button spacing */
.quick-price-section .btn{margin-top:24px}

/* Price filter (fiyatlar.html) */
.price-filter,
.price-selector{margin-bottom:24px}
.price-filter label,
.price-selector label{display:block;color:#c5c8d0;margin-bottom:8px;font-size:.95rem}
.price-filter select,
.price-selector select{
  background:#22242a;border:2px solid #2e3038;border-radius:6px;
  color:#d8dbe2;padding:10px 14px;font-size:.95rem;
  width:100%;max-width:400px;cursor:pointer;font-family:inherit;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.price-filter select:focus,
.price-selector select:focus{
  border-color:#f0c040;outline:none;
  box-shadow:0 0 0 3px rgba(240,192,64,.15);
}

/* Price sections / factors */
.price-section{margin-bottom:36px}
.price-section h2{color:#f0c040;font-size:1.4rem;margin-bottom:8px}
.price-factors{
  margin-top:32px;padding:28px;
  background:#1c1e23;border:1px solid #2a2c32;border-radius:12px;
  transition:border-color .3s ease;
}
.price-factors:hover{border-color:rgba(240,192,64,.2)}
.price-factors h2{color:#f0c040;font-size:1.3rem;margin-bottom:16px;border-bottom:none;padding-bottom:0}
.price-factors ul{padding-left:20px;margin-bottom:0}
.price-factors li{
  color:#b0b3bb;margin-bottom:8px;position:relative;padding-left:18px;line-height:1.7;
}
.price-factors li:last-child{margin-bottom:0}
.price-factors li::before{
  content:'';position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:#f0c040;
}
.intro-text{color:#b0b3bb;font-size:1.02rem;margin-bottom:28px;line-height:1.7}

/* ===== FAQ ===== */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid #2a2c32;transition:background .25s ease}
.faq-item:hover{background:rgba(240,192,64,.02)}
.faq-question{
  width:100%;background:none;border:none;color:#d8dbe2;
  padding:20px 0;font-size:1.02rem;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-weight:600;font-family:inherit;
  transition:color .25s ease;
}
.faq-question:hover,
.faq-question:focus{color:#f0c040;outline:none}
.faq-question::after{
  content:'+';font-size:1.3rem;color:#f0c040;
  flex-shrink:0;margin-left:12px;
  transition:transform .35s ease,color .25s ease;
}
.faq-question[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease;
  color:#b0b3bb;font-size:.95rem;line-height:1.7;
}
.faq-answer-inner{padding:0 0 20px}

/* ================================================================
   CONTACT PAGE (iletisim.html)
   ================================================================ */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
.contact-info{display:flex;flex-direction:column;gap:24px}

.contact-item,
.contact-info-item{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;background:#1c1e23;border:1px solid #2a2c32;
  border-radius:10px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.contact-item:hover,
.contact-info-item:hover{
  border-color:rgba(240,192,64,.3);transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}

/* SVG icons */
.contact-icon{
  width:24px;height:24px;flex-shrink:0;
  color:#f0c040;stroke:#f0c040;
  transition:transform .3s ease;
}
.contact-item:hover .contact-icon{transform:scale(1.1)}
.contact-item svg{flex-shrink:0;color:#f0c040;transition:transform .3s ease}
.contact-item:hover svg{transform:scale(1.1)}

.contact-info-item .ci-icon{
  width:40px;height:40px;background:rgba(240,192,64,.1);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .3s ease;
}
.contact-info-item:hover .ci-icon{background:rgba(240,192,64,.2)}
.contact-info-item .ci-icon svg{width:18px;height:18px;fill:#f0c040}

.contact-item h3{
  color:#f0c040;font-size:.95rem;margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.3px;
}
.contact-info-item strong{color:#f0c040;font-size:1rem;margin-bottom:4px}
.contact-item p,
.contact-info-item p{color:#c5c8d0;font-size:.95rem;line-height:1.6;margin:0}
.contact-item a{color:#c5c8d0;text-decoration:none!important;transition:color .25s ease}
.contact-item a:hover{color:#f0c040}
.contact-item div{display:flex;flex-direction:column;gap:2px}

/* Contact form */
.contact-form-wrapper,
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form-wrapper form{display:flex;flex-direction:column;gap:18px}
.contact-form-wrapper{
  background:#1c1e23;border:1px solid #2a2c32;border-radius:12px;padding:32px;
}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{
  color:#c5c8d0;font-size:.92rem;font-weight:600;
  letter-spacing:.2px;
}
.form-group label .req{color:#f44336;margin-left:2px}
.form-group input,
.form-group textarea,
.form-group select{
  background:#16181c;border:2px solid #2a2c32;border-radius:8px;
  color:#d8dbe2;padding:12px 16px;font-size:.95rem;
  font-family:inherit;width:100%;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.form-group input:hover,
.form-group textarea:hover{
  border-color:#3a3c44;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  border-color:#f0c040;outline:none;background:#1a1c21;
  box-shadow:0 0 0 3px rgba(240,192,64,.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#5a5d66;font-style:italic;transition:color .25s ease;
}
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder{color:#4a4d56}
.form-group textarea{resize:vertical;min-height:120px}
.form-group input.error,
.form-group textarea.error{border-color:#f44336;box-shadow:0 0 0 3px rgba(244,67,54,.1)}
.form-error{color:#f44336;font-size:.82rem;min-height:1.1em}

.consent-group{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.consent-group input[type="checkbox"]{
  margin-top:4px;accent-color:#f0c040;width:18px;height:18px;flex-shrink:0;
  cursor:pointer;transition:transform .2s ease;
}
.consent-group input[type="checkbox"]:hover{transform:scale(1.1)}
.consent-group label{font-size:.88rem;color:#9a9da6;flex:1;min-width:0}
.consent-group label a{color:#f0c040;text-decoration:none!important;transition:color .25s ease}
.consent-group label a:hover{color:#ffe07a}

.form-status{
  padding:16px;border-radius:8px;font-size:.95rem;display:none;margin-top:8px;
  transition:opacity .3s ease;
}
.form-status.success{
  display:block;background:rgba(76,175,80,.1);
  color:#81c784;border:1px solid rgba(76,175,80,.25);
}
.form-status.error-msg{
  display:block;background:rgba(244,67,54,.08);
  color:#e57373;border:1px solid rgba(244,67,54,.25);
}
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* ================================================================
   CONTENT PAGE
   ================================================================ */
.content-page{
  padding:48px 20px 56px;
  max-width:1140px;margin:0 auto;width:100%;
}
.content-page h1{
  font-size:2rem;color:#fff;margin-bottom:16px;
  letter-spacing:-.3px;
}
.content-page h2{
  font-size:1.4rem;color:#f0c040;margin:36px 0 14px;
  padding-bottom:8px;border-bottom:1px solid rgba(240,192,64,.12);
}
.content-page h3{font-size:1.15rem;color:#d8dbe2;margin:24px 0 10px}
.content-page p{color:#b0b3bb;margin-bottom:14px;line-height:1.8}
.content-page ul,
.content-page ol{margin-bottom:14px;padding-left:20px}
.content-page li{
  color:#b0b3bb;margin-bottom:8px;position:relative;padding-left:18px;line-height:1.7;
}
.content-page li::before{
  content:'';position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:#f0c040;
}
/* Links in content — underline for inline text links only */
.content-page p a,
.content-page li a{
  text-decoration:none!important;color:#f0c040;
  border-bottom:1px solid rgba(240,192,64,.3);
  transition:color .25s ease,border-color .25s ease;
}
.content-page p a:hover,
.content-page li a:hover{
  color:#ffe07a;border-bottom-color:#ffe07a;
}
/* Override: buttons and nav links never underline */
.content-page .btn{text-decoration:none!important;border-bottom:none}
.content-page > .breadcrumb a{text-decoration:none!important;border-bottom:none}

/* Breadcrumb inside content-page */
.content-page > .breadcrumb{margin-bottom:24px}

/* Strong text in content */
.content-page strong{color:#d8dbe2}

/* Service section (hizmetler.html) */
.service-section{
  margin-bottom:36px;padding-bottom:36px;
  border-bottom:1px solid #22242a;
}
.service-section:last-of-type{border-bottom:none}
.service-section h2{
  color:#f0c040;font-size:1.4rem;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid rgba(240,192,64,.12);
}

/* Article sections inside content pages (fren-belirtileri, lastik-ve-rot) */
.content-page > section:not(.cta-section):not(.price-section):not(.price-factors){
  margin-bottom:32px;padding:24px 28px;
  background:#1c1e23;border:1px solid #2a2c32;border-radius:12px;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.content-page > section:not(.cta-section):not(.price-section):not(.price-factors):hover{
  border-color:rgba(240,192,64,.15);
  box-shadow:0 2px 16px rgba(0,0,0,.15);
}
.content-page > section:not(.cta-section) h2{
  margin-top:0;padding-bottom:10px;
}
.content-page > section p{margin-bottom:12px}
.content-page > section p:last-child{margin-bottom:0}

/* CTA sections */
.cta-section{
  margin:40px 0 8px;padding:36px 32px 44px;
  background:linear-gradient(135deg,#1a1c20 0%,#1e2026 50%,#1a1c20 100%);
  border:1px solid rgba(240,192,64,.2);border-radius:12px;
  position:relative;word-wrap:break-word;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.cta-section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#f0c040,transparent);
  opacity:.5;border-radius:12px 12px 0 0;
}
.cta-section:hover{
  border-color:rgba(240,192,64,.4);
  box-shadow:0 4px 24px rgba(240,192,64,.08);
}
.cta-section h2{
  color:#fff;font-size:1.4rem;margin-bottom:12px;
  border-bottom:none;padding-bottom:0;
}
.cta-section p{margin-bottom:0;font-size:1rem;line-height:1.8}
.cta-section .btn{margin-top:20px}
.cta-group{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;max-width:100%}
.cta-group .btn{max-width:100%}

/* ===== BREADCRUMB ===== */
body > .breadcrumb{
  max-width:1140px;margin:0 auto;padding:16px 20px 0;
}
.breadcrumb{
  font-size:.85rem;color:#9a9da6;margin-bottom:24px;
  padding:0;
}
.breadcrumb ul,
.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;
  list-style:none;padding:0;margin:0;gap:0;
}
.breadcrumb li{
  padding-left:0;margin-bottom:0;
  display:inline-flex;align-items:center;
}
.breadcrumb li::before{display:none}
.breadcrumb li + li::before{
  display:inline-block;
  content:'';
  width:6px;height:6px;
  border-top:1.5px solid #4a4d56;
  border-right:1.5px solid #4a4d56;
  transform:rotate(45deg);
  margin:0 10px;
  flex-shrink:0;
}
.breadcrumb a{
  color:#7a7d86;text-decoration:none!important;
  transition:color .25s ease;font-weight:400;
}
.breadcrumb a:hover{color:#f0c040}
.breadcrumb span{color:#7a7d86}
.breadcrumb [aria-current="page"],
.breadcrumb li:last-child{color:#c5c8d0;font-weight:500}

/* ===== TEXT + IMAGE LAYOUT ===== */
.text-img{
  display:flex;gap:28px;align-items:flex-start;margin:20px 0;
}
.text-img--reverse{flex-direction:row-reverse}
.text-img-content{flex:1;min-width:0}
.text-img-visual{flex:0 0 280px;max-width:280px}
.text-img-visual img{
  width:100%;height:auto;border-radius:10px;
  border:1px solid #2a2c32;aspect-ratio:4/3;object-fit:cover;
  transition:transform .4s ease,box-shadow .4s ease;
}
.text-img-visual img:hover{
  transform:scale(1.02);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

/* ===== PLACEHOLDER IMAGE PANELS ===== */
.img-placeholder{
  width:100%;aspect-ratio:16/9;border-radius:8px;
  overflow:hidden;position:relative;background:#1a1c20;
}
.img-placeholder svg{width:100%;height:100%}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{
  background:#0d0e10;border-top:2px solid rgba(240,192,64,.18);
  padding:40px 0 24px;margin-top:auto;
}
.footer-inner,
.site-footer > .container{
  max-width:1140px;margin:0 auto;padding:0 20px;
}
.footer-columns,
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  gap:32px;margin-bottom:28px;
}
.footer-col h4{
  color:#f0c040;font-size:.95rem;margin-bottom:14px;
  text-transform:uppercase;letter-spacing:.5px;
}
.footer-col p{color:#7a7d86;font-size:.88rem;line-height:1.6}
.footer-col ul,
.footer-links{
  display:flex;flex-direction:column;gap:8px;
  list-style:none;padding:0;margin:0;
}
.footer-col a,
.footer-links a{
  color:#9a9da6;font-size:.88rem;text-decoration:none!important;
  transition:color .25s ease,padding-left .25s ease;
}
.footer-col a:hover,
.footer-links a:hover{color:#f0c040;padding-left:4px}
.footer-col li{padding-left:0;position:static}
.footer-col li::before{display:none}

.footer-bottom{
  border-top:1px solid #22242a;padding-top:18px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
}
.footer-bottom p{color:#5a5d66;font-size:.82rem}
.footer-bottom a{color:#7a7d86;font-size:.82rem;text-decoration:none!important;transition:color .25s ease}
.footer-bottom a:hover{color:#f0c040}

/* ================================================================
   COOKIE BANNER
   ================================================================ */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;
  background:#1c1e23;border-top:2px solid rgba(240,192,64,.3);
  padding:20px;z-index:9999;
  transform:translateY(100%);display:none;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.visible{display:block;transform:translateY(0)}

.cookie-banner-inner,
.cookie-inner{max-width:1140px;margin:0 auto}

.cookie-banner-inner > p,
.cookie-text{
  color:#b0b3bb;font-size:.9rem;margin-bottom:14px;line-height:1.6;
}
.cookie-banner-inner > p a,
.cookie-text a{text-decoration:none!important;border-bottom:1px solid rgba(240,192,64,.3);transition:color .25s ease,border-color .25s ease}
.cookie-banner-inner > p a:hover,
.cookie-text a:hover{color:#ffe07a;border-bottom-color:#ffe07a}

.cookie-buttons,
.cookie-actions{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;
}
.cookie-buttons .btn,
.cookie-actions .btn{padding:9px 20Иpx;font-size:.88rem}

.cookie-settings{
  display:none;margin-top:14px;padding-top:14px;
  border-top:1px solid #2a2c32;
}
.cookie-settings.open,
.cookie-settings:not([hidden]).open{display:block}

.cookie-option,
.cookie-opt{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.cookie-option label,
.cookie-opt label{color:#c5c8d0;font-size:.9rem;cursor:pointer}
.cookie-option p{color:#9a9da6;font-size:.82rem;margin:2px 0 0;line-height:1.5}
.cookie-option input[type="checkbox"],
.cookie-opt input[type="checkbox"]{
  accent-color:#f0c040;width:17px;height:17px;cursor:pointer;
  transition:transform .2s ease;
}
.cookie-option input[type="checkbox"]:hover,
.cookie-opt input[type="checkbox"]:hover{transform:scale(1.1)}
.cookie-option input[disabled],
.cookie-opt input[disabled]{opacity:.5;cursor:default}
.cookie-option input[disabled]:hover,
.cookie-opt input[disabled]:hover{transform:none}

.cookie-option{flex-wrap:wrap}
.cookie-option label{display:flex;align-items:center;gap:8px;width:100%}
.cookie-option label input{flex-shrink:0}

/* ===== SITEMAP PAGE ===== */
.sitemap-list li::before{background:#f0c040}
.content-page .sitemap-list a{
  text-decoration:none!important;border-bottom:none;
  transition:color .25s ease,padding-left .25s ease;
}
.content-page .sitemap-list a:hover{color:#ffe07a;padding-left:4px}

/* ===== 404 PAGE ===== */
.page-404{text-align:center;padding:100px 20px}
.page-404 h1{font-size:5rem;color:#f0c040;line-height:1;letter-spacing:-2px}
.page-404 p{font-size:1.15rem;color:#b0b3bb;margin:16px 0 28px}

/* ================================================================
   FADE-IN ANIMATION
   ================================================================ */
.fade-in{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ================================================================
   RESPONSIVE — TABLET (max 900px)
   ================================================================ */
@media(max-width:900px){
  .footer-columns,
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-section,
  .hero{padding:56px 20px 48px}
  .hero-section h1,
  .hero h1{font-size:1.9rem}
  .card-grid,
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .text-img-visual{flex:0 0 220px;max-width:220px}
  .contact-form-wrapper{padding:24px}
}

/* ================================================================
   RESPONSIVE — MOBILE (max 700px)
   ================================================================ */
@media(max-width:700px){
  .nav-toggle{display:block}

  .site-header nav ul,
  .main-nav ul,
  .nav-list{
    display:none;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:#181a1e;border-bottom:2px solid rgba(240,192,64,.25);
    padding:12px 20px;gap:2px;z-index:800;
  }
  .site-header nav ul.open,
  .main-nav ul.open,
  .nav-list.open{display:flex}

  .site-header nav a,
  .main-nav a{padding:10px 14px;font-size:.95rem;border-radius:4px}

  .header-inner,
  .header-container,
  .site-header > .container{flex-wrap:wrap;position:relative}

  .card-grid,
  .cards-grid{grid-template-columns:1fr}
  .section,.why-professional-section,.symptom-checker-section,.quick-price-section{padding:40px 0}

  .text-img,
  .text-img--reverse{flex-direction:column}
  .text-img-visual{flex:none;max-width:100%;width:100%}
  .text-img-visual img{max-width:320px}

  .price-table th,
  .price-table td{padding:10px 8px;font-size:.85rem}

  .footer-columns,
  .footer-grid{grid-template-columns:1fr}

  .hero-section h1,
  .hero h1{font-size:1.55rem}
  .hero-subtitle,
  .hero p{font-size:1rem}

  .content-page{padding:32px 16px 40px}
  .content-page h1{font-size:1.6rem}
  .content-page h2{font-size:1.2rem}

  .contact-grid{gap:24px}
  .contact-form-wrapper{padding:20px}

  .cookie-buttons,
  .cookie-actions{flex-direction:column;align-items:stretch}
  .cookie-buttons .btn,
  .cookie-actions .btn{text-align:center}

  .cta-section{padding:24px 20px 28px}
  .cta-group{flex-direction:column}
  .cta-group .btn{text-align:center;width:100%}

  .content-page > section:not(.cta-section):not(.price-section):not(.price-factors){
    padding:20px 18px;margin-bottom:24px;
  }

  .faq-question{padding:16px 0;font-size:.98rem}

  .breadcrumb{font-size:.8rem}
  .breadcrumb li + li::before{margin:0 8px;width:5px;height:5px}
}

/* ================================================================
   RESPONSIVE — SMALL MOBILE (max 400px)
   ================================================================ */
@media(max-width:400px){
  .hero-section,
  .hero{padding:36px 14px 32px}
  .hero-section h1,
  .hero h1{font-size:1.35rem}
  .content-page{padding:24px 12px 32px}
  .content-page h1{font-size:1.4rem}
  .btn{padding:10px 20px;font-size:.9rem}
  .section-inner{padding:0 14px}
  .footer-inner,
  .site-footer > .container{padding:0 14px}
  .card{border-radius:8px}
  .faq-question{font-size:.92rem;padding:14px 0}
  .price-table th,
  .price-table td{padding:8px 6px;font-size:.8rem}
  .contact-item,
  .contact-info-item{padding:16px}
  .contact-form-wrapper{padding:16px;border-radius:8px}
  .content-page > section:not(.cta-section):not(.price-section):not(.price-factors){
    padding:16px 14px;
  }
  .cta-section{padding:20px 16px 24px}
  .price-factors{padding:20px 16px}
}