/* =========================================================
   TOSDER — Tüm Otomotiv Servisleri Derneği
   Design system: "Servis Teşhis Paneli" (diagnostic-panel)
   ========================================================= */

:root{
  /* Core palette (derived from TOSDER wordmark: black + service blue) */
  --ink:        #0B1420;   /* primary dark bg */
  --ink-2:      #111E2D;   /* secondary dark panel */
  --ink-3:      #17293C;   /* tertiary dark panel / borders on dark */
  --brand:      #1475BA;   /* TOSDER blue (from logo) — sole accent color */
  --brand-600:  #115D93;
  --brand-700:  #0D4972;
  --brand-100:  #E4F1FA;
  --amber:      #1475BA;   /* unified with brand — kept as alias so existing utility classes stay in sync */
  --amber-600:  #115D93;
  --amber-100:  #E4F1FA;
  --paper:      #F6F7F9;
  --paper-2:    #EDEFF2;
  --line:       #DFE3E8;
  --line-2:     #C9CFD6;
  --text:       #101820;
  --text-soft:  #545E6B;
  --text-mute:  #7A8391;
  --white:      #FFFFFF;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(11,20,32,.06), 0 1px 1px rgba(11,20,32,.04);
  --shadow-md: 0 8px 24px rgba(11,20,32,.10);
  --shadow-lg: 0 20px 48px rgba(11,20,32,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

::selection{ background: var(--amber); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Utility: focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2.5px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Typography ---------- */
.font-display{ font-family: var(--font-display); }
.font-mono{ font-family: var(--font-mono); letter-spacing:.04em; }

.h-display{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: .96;
  text-transform: uppercase;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight:600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow.on-dark{ color: var(--amber); }
.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px; height:2px;
  background: currentColor;
  margin-right:10px;
  vertical-align:middle;
  transform:translateY(-2px);
}

/* ---------- Background patterns (signature system) ---------- */
.grid-blueprint{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 42px 42px;
}
.grid-blueprint-light{
  background-image:
    linear-gradient(rgba(11,20,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,20,32,.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
  border: 1.5px solid transparent;
  cursor:pointer;
}
.btn:active{ transform: scale(.97); }
.btn-amber{
  background: var(--amber); color: #fff;
  box-shadow: 0 6px 18px rgba(20,117,186,.35);
}
.btn-amber:hover{ background: var(--amber-600); box-shadow: 0 8px 22px rgba(20,117,186,.45); }
.btn-outline-dark{
  border-color: rgba(255,255,255,.35); color:#fff; background:transparent;
}
.btn-outline-dark:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.btn-outline{
  border-color: var(--line-2); color: var(--text); background:#fff;
}
.btn-outline:hover{ border-color: var(--brand); color: var(--brand); }
.btn-brand{
  background: var(--brand); color:#fff;
  box-shadow: 0 6px 18px rgba(28,116,188,.3);
}
.btn-brand:hover{ background: var(--brand-600); }
.btn-sm{ padding:.6rem 1.15rem; font-size:.85rem; }

/* ---------- Header ---------- */
#site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
#site-header.scrolled{
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav-link{
  position:relative;
  font-size:.87rem; font-weight:500; color: var(--text-soft);
  padding: .4rem .05rem;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--amber); transform: scaleX(0); transform-origin:left;
  transition: transform .22s ease;
}
.nav-link:hover, .nav-link.active{ color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1); }

#mobile-menu{
  max-height:0; overflow:hidden; transition: max-height .35s ease;
}
#mobile-menu.open{ max-height: 640px; }

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }

.pillar-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.pillar-icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--brand-100); color: var(--brand);
  margin-bottom: 1.1rem;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------- Section divider tick strip (automotive gauge motif) ---------- */
.tick-strip{
  height: 10px;
  background-image: repeating-linear-gradient(90deg, var(--line-2) 0 1.5px, transparent 1.5px 14px);
}
.tick-strip.on-dark{
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1.5px, transparent 1.5px 14px);
}

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.4rem .25rem; font-weight:600; font-size:1.05rem; color: var(--text); background:none; border:none; cursor:pointer;
}
.faq-icon{ flex:none; width:26px; height:26px; color: var(--brand); transition: transform .3s ease; }
.faq-item.open .faq-icon{ transform: rotate(45deg); color: var(--amber); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-answer-inner{ padding: 0 .25rem 1.5rem; color: var(--text-soft); line-height:1.7; }

/* ---------- Stat / trust chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color:#fff; font-size:.85rem; font-weight:500;
}
.chip-dot{ width:7px; height:7px; border-radius:99px; background: var(--amber); flex:none; }

/* ---------- Board member tile ---------- */
.board-tile{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-align:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.board-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.board-avatar{
  width:76px; height:76px; border-radius:50%;
  margin: 0 auto .9rem;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1.5rem; font-weight:700;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-700) 100%);
  color:#fff;
}

/* ---------- Forms ---------- */
.field-label{ display:block; font-size:.82rem; font-weight:600; color: var(--text); margin-bottom:.4rem; }
.field-input, .field-select, .field-textarea{
  width:100%; padding:.75rem .9rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-2); background:#fff; font-size:.95rem; color:var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
  font-family: var(--font-body);
}
.field-input:focus, .field-select:focus, .field-textarea:focus{
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); outline:none;
}
.field-input.field-error, .field-select.field-error, .field-textarea.field-error{
  border-color:#D0392A; box-shadow: 0 0 0 4px rgba(208,57,42,.1);
}
/* Placeholder, girilen değerden açıkça daha soluk durmalı ki örnek metin
   doldurulmuş bir alan gibi okunmasın. */
.field-input::placeholder, .field-textarea::placeholder{
  color: var(--text-soft); opacity:.55;
}
/* Açılır listede henüz seçim yapılmadıysa (placeholder seçeneği etkin)
   alanı da aynı soluklukta göster. */
.field-select:has(option[value=""]:checked){ color: var(--text-soft); opacity:.75; }
.field-select option{ color: var(--text); opacity:1; }

.field-error-msg{ color:#D0392A; font-size:.8rem; margin-top:.35rem; display:none; }
.field-error-msg.show{ display:block; }

/* Form gönderim hatası kutusu ve bot tuzağı (ekran dışında, görünmez alan). */
.form-alert{ color:#D0392A; background:#FDECEA; border:1px solid #F5C2BC; border-radius:var(--radius); padding:.9rem 1.1rem; font-size:.9rem; }
.form-hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.checkbox-row{ display:flex; align-items:flex-start; gap:.65rem; }
.checkbox-row input{ margin-top:.28rem; width:17px; height:17px; accent-color: var(--brand); flex:none; }

/* ---------- Footer ---------- */
footer a{ transition: color .18s ease, opacity .18s ease; }

/* ---------- Misc ---------- */
.section-pad{ padding-top: 6rem; padding-bottom:6rem; }
@media (max-width:768px){ .section-pad{ padding-top:3.5rem; padding-bottom:3.5rem; } }

.hairline{ height:1px; background: var(--line); border:none; }
.hairline.on-dark{ background: rgba(255,255,255,.14); }

.counter{ font-family: var(--font-display); }

.logo-chip{
  background:#fff; border-radius:10px; padding:6px 10px; display:inline-flex; align-items:center;
}

.marker-num{
  font-family: var(--font-mono); font-size:.78rem; color: var(--amber); font-weight:600;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--ink); color:#fff; padding:.75rem 1.25rem; z-index:200; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- Cookie Consent Banner ---------- */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: -140%;
  z-index: 300;
  max-width: 980px;
  margin: 0 auto;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.75rem;
  transition: bottom .5s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.is-visible{ bottom: 20px; }
.cookie-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 1.75rem; flex-wrap: wrap;
}
.cookie-banner-text{ flex:1 1 380px; min-width: 240px; }
.cookie-banner-text p{ font-size:.9rem; line-height:1.6; color: var(--text-soft); margin:0; }
.cookie-banner-links{ margin-top:.5rem !important; }
.cookie-banner-links a{ color: var(--brand); font-weight:600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-link-btn{
  color: var(--brand); font-weight:600; text-decoration: underline; text-underline-offset: 2px;
  background:none; border:none; padding:0; font-size:.9rem; cursor:pointer; font-family: var(--font-body);
}
.cookie-banner-actions{ display:flex; gap:.75rem; flex:0 0 auto; }
@media (max-width: 640px){
  .cookie-banner{ padding: 1.25rem; left:10px; right:10px; }
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1; }
}

.cookie-fab{
  position: fixed; left: 20px; bottom: 20px; z-index: 290;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  border: none; cursor:pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.cookie-fab:hover{ background: var(--brand-700); transform: translateY(-2px); }
.cookie-fab.hidden{ display:none; }

.cookie-modal-overlay{
  position: fixed; inset:0; z-index: 310;
  background: rgba(11,20,32,.55);
  display:flex; align-items:center; justify-content:center;
  padding: 1.25rem;
  opacity:0; transition: opacity .22s ease;
}
.cookie-modal-overlay.is-visible{ opacity:1; }
.cookie-modal-overlay.hidden{ display:none; }
.cookie-modal{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-width: 460px; width:100%; max-height: 88vh; overflow-y:auto;
  padding: 1.75rem;
}
.cookie-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.cookie-modal-close{ background:none; border:none; padding:.25rem; cursor:pointer; color: var(--text-mute); }
.cookie-modal-close:hover{ color: var(--ink); }
.cookie-modal-desc{ font-size:.85rem; line-height:1.6; color: var(--text-soft); margin-bottom:1.25rem; }

.cookie-cat{ padding: 1rem 0; border-top: 1px solid var(--line); }
.cookie-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cookie-cat-title{ font-weight:600; font-size:.92rem; color: var(--ink); margin:0; }
.cookie-cat-desc{ font-size:.8rem; line-height:1.55; color: var(--text-mute); margin:.4rem 0 0; }

.cookie-toggle{
  position:relative; width:42px; height:24px; border-radius:999px;
  background: var(--line-2); border:none; padding:0; cursor:pointer; flex:none;
  transition: background-color .2s ease;
}
.cookie-toggle-dot{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow: 0 1px 3px rgba(11,20,32,.3);
  transition: transform .2s ease;
}
.cookie-toggle.is-on{ background: var(--brand); }
.cookie-toggle.is-on .cookie-toggle-dot{ transform: translateX(18px); }
.cookie-toggle-locked{ background: var(--brand); opacity:.55; cursor:not-allowed; }
.cookie-toggle-locked .cookie-toggle-dot{ transform: translateX(18px); }

.cookie-modal-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.cookie-modal-actions .btn{ flex:1 1 auto; }
.cookie-modal-more{ display:block; text-align:center; margin-top:1.1rem; font-size:.82rem; font-weight:600; color: var(--brand); }

/* ---------- Fotoğraflar ---------- */
/* Koyu bölümlerin arkasındaki fotoğraf katmanı (sayfa başlıkları, CTA'lar) */
.photo-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-shade{ position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,32,.66) 0%, rgba(11,20,32,.78) 60%, rgba(11,20,32,.92) 100%); }
.photo-shade-side{ position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,20,32,.94) 0%, rgba(11,20,32,.80) 55%, rgba(11,20,32,.62) 100%); }

/* Çerçeveli fotoğraf (ana sayfa hero, hakkımızda) */
.photo-frame{ position:relative; border-radius: var(--radius); overflow:hidden; background: var(--ink-2); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.photo-frame:hover img{ transform: scale(1.03); }
.photo-caption{
  position:absolute; left:14px; bottom:14px; right:14px;
  display:inline-flex; align-items:center; gap:.5rem; width:max-content; max-width:calc(100% - 28px);
  padding:.45rem .75rem; border-radius: 999px;
  background: rgba(11,20,32,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color:#fff; font-family: var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.photo-caption::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--brand); flex:none; }

/* Kart üstü görsel */
.card-media{ aspect-ratio: 16/10; overflow:hidden; background: var(--paper-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-media img{ transform: scale(1.05); }

/* Sahadan kareler mozaiği */
.mosaic{ display:grid; gap:12px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
.mosaic figure{ position:relative; margin:0; border-radius: var(--radius-sm); overflow:hidden; background: var(--ink-2); }
.mosaic img{ width:100%; height:100%; object-fit:cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.mosaic figure:hover img{ transform: scale(1.04); }
.mosaic figcaption{
  position:absolute; inset:auto 0 0 0; padding:2rem .9rem .75rem;
  background: linear-gradient(180deg, transparent, rgba(11,20,32,.82));
  color:#fff; font-family: var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.mosaic .m-lg{ grid-column: span 2; grid-row: span 2; }
.mosaic .m-wide{ grid-column: span 2; }
@media (min-width: 768px){
  .mosaic{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
  .mosaic .m-lg{ grid-column: span 2; grid-row: span 2; }
  .mosaic .m-tall{ grid-row: span 2; }
}

/* İçerik içi fotoğraf çifti */
.photo-pair{ display:grid; gap:12px; grid-template-columns: 1fr; }
.photo-pair figure{ margin:0; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 4/3; }
@media (min-width: 640px){
  .photo-pair{ grid-template-columns: 1.4fr 1fr; }
  .photo-pair figure{ aspect-ratio:auto; height: 280px; }
}
.photo-pair img{ width:100%; height:100%; object-fit:cover; }