/* =========================================================
   heat-it.com.tr — Design Tokens
   Signature motif: "Isı Halkası" (thermal contact ring) —
   ürünün dairesel metal temas yüzeyinin 51°C konsantre ısısını
   simgeler. Logo noktasından buton hover'ına, adım numaralarından
   bölüm ayraçlarına kadar tekrar eder.
   ========================================================= */

:root{
  --bg: #F7F9FA;
  --surface: #FFFFFF;
  --surface-tint: #EEF3F4;
  --ink: #0F2438;
  --text: #45525C;
  --muted: #7C8A92;
  --line: #DCE3E6;
  --teal: #1B6B72;
  --teal-deep: #134F54;
  --ember: #FF5A36;
  --ember-deep: #D6431E;
  --ember-soft: #FFE7DF;
  --success: #2F8F5B;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1180px;
  --shadow-soft: 0 8px 28px rgba(15,36,56,0.08);
  --shadow-card: 0 2px 0 rgba(15,36,56,0.04), 0 10px 24px rgba(15,36,56,0.06);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em 0;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h1{ font-size: clamp(2rem, 4.4vw, 3.4rem); line-height:1.06; font-weight:700; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.15; }
h3{ font-size: 1.15rem; }
p{ margin:0 0 1em 0; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* focus visibility — erişilebilirlik */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember-deep);
  display:flex; align-items:center; gap:.5em;
  margin-bottom: .9em;
}
.eyebrow::before{
  content:"";
  width: 9px; height:9px; border-radius:50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-soft);
  flex-shrink:0;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(247,249,250,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.logo{
  font-family: var(--font-display);
  font-weight:700; font-size:1.25rem; color: var(--ink);
  display:flex; align-items:center; gap:.5em;
}
.logo .ring{
  width:14px; height:14px; border-radius:50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-soft), 0 0 0 6px rgba(255,90,54,0.12);
}
.logo small{ font-family: var(--font-mono); color: var(--muted); font-weight:400; font-size:.6em; }

.main-nav{ display:flex; align-items:center; gap: 2.1rem; }
.main-nav a{
  font-size:.92rem; color: var(--text); font-weight:500;
  position:relative; padding: .3rem 0;
}
.main-nav a.active{ color: var(--ink); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--ember); border-radius:2px;
}
.nav-cta{
  background: var(--ink); color:#fff !important; padding:.62rem 1.2rem;
  border-radius: 999px; font-size:.88rem; font-weight:600;
}
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; }

@media (max-width: 860px){
  .main-nav{
    position:absolute; top:76px; left:0; right:0; background:var(--surface);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .main-nav.open{ max-height: 420px; }
  .main-nav a{ width:100%; padding: 1rem 28px; border-bottom:1px solid var(--line); }
  .main-nav a.active::after{ display:none; }
  .nav-cta{ margin:1rem 28px; }
  .nav-toggle{ display:block; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-body); font-weight:600; font-size:.96rem;
  padding: .85rem 1.6rem; border-radius: 999px; cursor:pointer;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  position:relative; isolation:isolate;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--ember); color:#fff; box-shadow: 0 10px 24px rgba(255,90,54,.28); }
.btn-primary:hover{ background: var(--ember-deep); }
.btn-primary::before{
  content:""; position:absolute; inset:-6px; border-radius:999px;
  border:1px solid var(--ember); opacity:0; transition: all .25s ease; z-index:-1;
}
.btn-primary:hover::before{ inset:-10px; opacity:.35; }
.btn-outline{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink); }
.btn-dark{ background: var(--ink); color:#fff; }
.btn-dark:hover{ background:#091625; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- hero ---------- */
.hero{ padding: 64px 0 84px; overflow:hidden; position:relative; }
.hero .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero-copy p.lead{ font-size: 1.08rem; color: var(--text); max-width: 46ch; }
.hero-actions{ display:flex; gap: .9rem; margin-top: 1.6rem; flex-wrap:wrap; align-items:center; }
.hero-note{ font-family: var(--font-mono); font-size:.78rem; color: var(--muted); margin-top:1.1rem; }
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; }
}

/* ---------- sections / rhythm ---------- */
.section{ padding: 76px 0; }
.section.tint{ background: var(--surface-tint); }
.section-head{ max-width: 640px; margin-bottom: 2.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

.ring-divider{
  display:flex; justify-content:center; margin: 0 0 2.6rem;
}
.ring-divider svg{ opacity:.5; }

/* ---------- value props ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }
.card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem 1.6rem; box-shadow: var(--shadow-card);
}
.card .ring-icon{ margin-bottom: 1.1rem; }
.card h3{ margin-bottom:.45rem; }
.card p{ font-size:.95rem; color: var(--text); margin-bottom:0; }

/* ---------- ring icon (signature) ---------- */
.ring-icon{ width:46px; height:46px; position:relative; }
.ring-icon::before, .ring-icon::after{
  content:""; position:absolute; border-radius:50%; border:1.5px solid var(--teal);
  inset:0;
}
.ring-icon::after{ inset:10px; border-color: var(--ember); background: var(--ember-soft); }

/* ---------- steps (Nasıl Çalışır) ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; counter-reset: step; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top: 4px; }
.step-num{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: var(--ember);
  border: 1.5px solid var(--ember); margin-bottom: 1.1rem; position:relative;
}
.step-num::before{
  content:""; position:absolute; inset:-7px; border-radius:50%; border:1px dashed var(--line);
}
.step h3{ margin-bottom:.4rem; }
.step p{ font-size:.94rem; }

/* ---------- gallery / placeholders ---------- */
.media-placeholder{
  background: linear-gradient(135deg, var(--surface-tint), var(--surface));
  border: 1px dashed var(--line); border-radius: var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; color: var(--muted); text-align:center; padding: 2rem 1rem; min-height: 220px;
}
.media-placeholder .tag{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  background: var(--ink); color:#fff; padding:.25rem .6rem; border-radius: 4px;
}
.media-placeholder p{ margin:0; font-size:.85rem; max-width: 28ch; }
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
@media (max-width:860px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ---------- badges (awards/trust) ---------- */
.badge-row{ display:flex; gap: 1.4rem; flex-wrap:wrap; align-items:center; }
.badge{
  display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); background:var(--surface);
  border-radius: var(--radius-sm); padding:.7rem 1rem; font-size:.84rem; color: var(--ink); font-weight:600;
}
.badge svg{ width:22px; height:22px; flex-shrink:0; }

/* ---------- testimonial placeholder ---------- */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
@media (max-width:860px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  border:1px dashed var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--surface);
  color: var(--muted); font-size:.88rem;
}
.testi-card .tag{ font-family: var(--font-mono); font-size:.7rem; color: var(--ember-deep); display:block; margin-bottom:.5rem; }

/* ---------- product page ---------- */
.variant-toggle{ display:flex; gap: .8rem; margin-bottom: 1.6rem; flex-wrap:wrap; }
.variant-btn{
  flex:1; min-width: 220px; text-align:left; border:1.5px solid var(--line); background: var(--surface);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.variant-btn strong{ display:block; font-family: var(--font-display); color: var(--ink); margin-bottom:.25rem; }
.variant-btn span{ font-size:.85rem; color: var(--muted); }
.variant-btn[aria-pressed="true"]{ border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }

.buy-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: .9rem; margin-top: 1.4rem; }
@media (max-width:640px){ .buy-grid{ grid-template-columns:1fr; } }
.buy-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  border:1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; font-weight:600; color: var(--ink); font-size:.92rem;
  transition: border-color .15s ease, background .15s ease;
}
.buy-btn:hover{ border-color: var(--teal); background: var(--surface-tint); }
.buy-btn.primary{ border-color: var(--ember); background: var(--ember-soft); }
.buy-btn .arrow{ color: var(--ember-deep); font-family: var(--font-mono); }

.warranty-note{
  margin-top: 1.6rem; font-size:.86rem; color: var(--teal-deep); font-family: var(--font-mono);
  border-left: 2px solid var(--teal); padding-left: .9rem;
}

/* ---------- compatibility page ---------- */
.search-box{
  position: relative; max-width: 560px; margin: 0 auto 2.6rem;
}
.search-box input{
  width:100%; padding: 1rem 1.2rem 1rem 3rem; border-radius: 999px; border: 1.5px solid var(--line);
  font-family: var(--font-body); font-size: 1rem; background: var(--surface);
}
.search-box input:focus{ border-color: var(--ember); outline:none; }
.search-box .icon{ position:absolute; left: 1.1rem; top:50%; transform: translateY(-50%); color: var(--muted); }
.search-result{
  margin-top: .9rem; text-align:center; font-family: var(--font-mono); font-size:.88rem; min-height: 1.4em;
}
.search-result.usb{ color: var(--teal-deep); }
.search-result.lightning{ color: var(--ember-deep); }
.search-result.empty{ color: var(--muted); }

.compat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
@media (max-width:760px){ .compat-grid{ grid-template-columns:1fr; } }
.compat-col{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.compat-col h3{ display:flex; align-items:center; gap:.6rem; }
.compat-list{ margin-top: 1rem; display:flex; flex-direction:column; gap:.0; }
.compat-list li{
  display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.9rem;
}
.compat-list li:last-child{ border-bottom:0; }
.compat-list .conn{ font-family: var(--font-mono); font-size:.74rem; padding:.15rem .5rem; border-radius:4px; }
.conn.usbc{ background: #E5F1EE; color: var(--teal-deep); }
.conn.lightning{ background: var(--ember-soft); color: var(--ember-deep); }
.compat-note{ margin-top:1rem; font-size:.82rem; color: var(--muted); }

/* ---------- science page ---------- */
.science-block{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items:center; }
@media (max-width:860px){ .science-block{ grid-template-columns:1fr; } }
.spec-list{ display:flex; flex-direction:column; gap: .9rem; margin-top: 1.4rem; }
.spec-row{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:.6rem; }
.spec-row .k{ font-family: var(--font-mono); font-size:.8rem; color: var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.spec-row .v{ font-weight:600; color: var(--ink); }
.compare-table{ width:100%; border-collapse: collapse; margin-top: 1.4rem; font-size:.92rem; }
.compare-table th, .compare-table td{ padding: .75rem .6rem; border-bottom:1px solid var(--line); text-align:left; }
.compare-table th{ font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); }
.compare-table td.good{ color: var(--teal-deep); font-weight:600; }
.compare-table td.bad{ color: var(--ember-deep); font-weight:600; }

/* ---------- FAQ / contact ---------- */
.privacy-note{
  display:flex; gap:.8rem; align-items:flex-start; background: var(--surface-tint);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 2.2rem; font-size:.9rem;
}
.privacy-note svg{ flex-shrink:0; margin-top:2px; color: var(--teal); }

.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  padding: 1.2rem 0; font-family: var(--font-display); font-weight:600; color: var(--ink); font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family: var(--font-mono); font-size:1.3rem; color: var(--ember); transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-a{ padding: 0 0 1.2rem; color: var(--text); font-size:.95rem; max-width: 70ch; }

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.form-field{ margin-bottom: 1.2rem; }
.form-field label{ display:block; font-size:.85rem; font-weight:600; color: var(--ink); margin-bottom:.4rem; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.8rem .9rem;
  font-family: var(--font-body); font-size:.95rem; background: var(--surface); color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--ember); outline:none; }
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-error{ font-size:.78rem; color: var(--ember-deep); margin-top:.3rem; display:none; font-family: var(--font-mono); }
.form-field.invalid input, .form-field.invalid textarea, .form-field.invalid select{ border-color: var(--ember-deep); }
.form-field.invalid .form-error{ display:block; }
.form-status{
  margin-top: 1rem; font-family: var(--font-mono); font-size:.85rem; padding:.9rem 1rem; border-radius: var(--radius-sm);
  display:none;
}
.form-status.show{ display:block; }
.form-status.ok{ background:#E7F4ED; color: var(--success); }
.form-status.err{ background: var(--ember-soft); color: var(--ember-deep); }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: #C9D3D9; padding: 56px 0 28px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; margin-bottom: 2.4rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:1.8rem; } }
.footer-grid h4{ color:#fff; font-size:.82rem; font-family: var(--font-mono); letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.footer-grid a, .footer-grid p{ color:#9FB0B8; font-size:.9rem; display:block; margin-bottom:.6rem; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.6rem;
  font-size:.78rem; color:#7E909A; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer-disclaimer{ max-width: 760px; }

/* utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.muted{ color: var(--muted); }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100;
}
.skip-link:focus{ left: 12px; top:12px; }