/* ═══════════════════════════════════════════════════════════════════
   DETAY SAYFALARI — ortak aile
   Altı teknoloji detay sayfası (tek-*.html) ve Deneyim bölümünün sayfaları
   (deneyim-*.html) bu iskeleti paylaşır. Bileşenler teknolojiye özel değil:
   hero, bölüm başlığı, kart listesi, özellik şeridi, vurgu kartı, sonraki
   sayfa kartı. Sayfaya özgü renk `--ac` ile verilir.

   Akış (image193, birebir):
     Keşfet → Teknoloji Mimarisi → Yüzey Mühendisliği (accordion)
     → Luxe Touch™ (bottom sheet) → "Teknolojiyi İncele"
     → sağdan kayan yeni sayfa (push navigation, ayrı URL)
   Sheet önce KAPANIR, sonra gezinme olur (tech.js). Push geçişi
   site-chrome.css'teki @view-transition ile.

   UX referansı: `[B1] YÜZEY MÜHENDİSLİĞİ UX UYGULAMASI BU SAYFA GİBİ OLACAK
   AKIŞ HEPSİNDE` → Skin+ sekmesi. Ortak iskelet: hero → neden geliştirildi
   → sistem içindeki yeri → teknolojiye özgü bölümler → kapanış + sonraki
   teknoloji kartı.

   ⚠️ Zemin kuralı (CLAUDE.md): bölüm zemini referans ekranı neyse odur.
   Skin+'ın "Nasıl Çalışır?" bölümü açık, Smart Ice'ınki koyu — ikisi de
   kendi ekranına uyar. Vurgu rengi sayfa başına `--ac` ile verilir.
   ═══════════════════════════════════════════════════════════════════ */

.td{--ac:var(--q-orange-bright);--ac-soft:rgba(224,123,46,.5);
  background:var(--q-black);color:#fff;position:relative;overflow:hidden}
.td .wrap{position:relative}
.td .tm{font-family:var(--font-sans);font-size:.5em;font-weight:400;
  vertical-align:super;letter-spacing:0}
.td h1 .tm,.td h2 .tm{font-size:.3em}
.td .o{color:var(--ac)}

/* ─────────────── Geri + breadcrumb ───────────────
   image191/201/204: sayfanın sol üstünde geri oku var — "kullanıcı geri
   butonu ile önceki ekrana dönebilecek" (image193). Tarayıcı geçmişi varsa
   geri gider (push-pop), yoksa Teknoloji Mimarisi'ne düşer. */
.td-nav{display:flex;align-items:center;gap:14px;
  padding:calc(var(--header-height,78px) + 14px) 0 0}
.td-back{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--q-graphite);border-radius:50%;background:none;
  color:var(--ac);transition:var(--dur) var(--ease)}
.td-back .qi{width:17px;height:17px;transform:rotate(180deg)}
.td-back:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}
.td-crumbs{min-width:0;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
  mask-image:linear-gradient(90deg,#000 90%,transparent)}
.td-crumbs::-webkit-scrollbar{display:none}
.td-crumbs ol{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:12.5px;color:var(--q-muted)}
.td-crumbs li{display:flex;align-items:center;gap:8px}
.td-crumbs li+li::before{content:"›";color:#4A4E56}
.td-crumbs a:hover{color:var(--ac)}
.td-crumbs [aria-current]{color:var(--ac)}

/* ─────────────── Bölüm iskeleti ─────────────── */
.td-sec{padding:clamp(48px,10vw,100px) 0}
.td-kicker{display:block;font-size:clamp(10.5px,2.8vw,12px);font-weight:600;
  letter-spacing:.2em;color:var(--ac);margin-bottom:16px}
.td h1,.td h2{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;color:#fff}
.td h1{font-size:clamp(42px,11.6vw,84px);line-height:1.02}
.td h2{font-size:clamp(30px,8vw,54px);line-height:1.1}
.td-rule{display:block;width:56px;height:2px;margin:20px 0;background:var(--ac)}
.td-sub{font-size:clamp(14px,3.8vw,19px);line-height:1.4;color:var(--ac);
  letter-spacing:.02em;margin-top:6px}
.td-lead{font-size:clamp(14.5px,3.9vw,18px);line-height:1.6;color:var(--q-body);max-width:560px}
.td-lead+.td-lead{margin-top:16px}

/* ─────────────── Hero ───────────────
   Tam genişlik görsel, metin üstünde. Görsel açık tonluysa (Luxe Touch)
   metnin okunması için koyu perde gerekiyor. */
.td-hero{padding:0 0 clamp(40px,8vw,72px);min-height:88vh;min-height:88dvh;
  display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.td-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.td-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.td-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.92) 0%,rgba(6,6,8,.55) 34%,
    rgba(6,6,8,.72) 74%,var(--q-black) 100%)}
.td-hero .td-nav{position:absolute;top:0;left:0;right:0;padding-inline:clamp(20px,4vw,32px)}
.td-hero-in{margin-top:auto;padding-top:clamp(120px,26vw,220px)}

/* Hero altındaki dört özellik şeridi (image191 · 201 · 220) */
.td-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(28px,6vw,44px) 0 0;text-align:center}
.td-feat{padding:0 clamp(4px,1.6vw,12px);position:relative}
.td-feat+.td-feat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--q-graphite)}
.td-feat .ic{width:clamp(44px,11.5vw,58px);height:clamp(44px,11.5vw,58px);margin:0 auto 12px;
  border-radius:50%;border:1px solid var(--ac-soft);display:grid;place-items:center;color:var(--ac)}
.td-feat .ic .qi{width:46%;height:46%}
.td-feat b{display:block;font-size:clamp(9.5px,2.5vw,12px);font-weight:500;line-height:1.35;color:#fff}
.td-feat span{display:block;font-size:clamp(9px,2.3vw,11px);line-height:1.4;
  color:var(--q-muted);margin-top:5px}

.td-cue{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:clamp(26px,6vw,40px);color:var(--q-muted);
  font-size:11px;font-weight:600;letter-spacing:.18em}
.td-cue .qi{width:16px;height:16px;transform:rotate(90deg);color:var(--ac);
  animation:tdcue 2.6s var(--ease) infinite}
@keyframes tdcue{0%,100%{transform:rotate(90deg) translateX(0);opacity:.65}
  50%{transform:rotate(90deg) translateX(6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.td-cue .qi{animation:none;opacity:1}}

/* ─────────────── Kart listesi (image192: Neden Geliştirildi?) ─────────────── */
.td-cards{display:grid;gap:clamp(10px,2.6vw,16px);margin:clamp(28px,6vw,44px) 0 0}
.td-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,3.4vw,22px);
  align-items:center;padding:clamp(14px,3.4vw,22px);
  background:var(--q-black-soft);border:1px solid var(--q-graphite);border-radius:var(--r-card)}
.td-card .ic{width:clamp(48px,12vw,64px);height:clamp(48px,12vw,64px);border-radius:50%;
  border:1px solid var(--ac-soft);display:grid;place-items:center;color:var(--ac)}
.td-card .ic .qi{width:48%;height:48%}
.td-card .no{display:block;font-family:var(--font-sans);font-size:clamp(14px,3.6vw,17px);
  font-weight:600;color:var(--ac);margin-bottom:4px}
.td-card b{display:block;font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(16px,4.2vw,22px);color:#fff}
.td-card p{font-size:clamp(11.5px,3vw,14px);line-height:1.55;color:var(--q-body);margin-top:7px}
.td-card--num .txt{border-left:1px solid var(--q-graphite);padding-left:clamp(14px,3.4vw,20px)}

/* ─────────────── Sistem içindeki yeri (REVİZE 3. ekran) ─────────────── */
.td-stage{margin:clamp(26px,6vw,44px) auto 0;max-width:820px}
.td-stage img{width:100%;height:auto}
.td-tagged{position:relative;margin:clamp(26px,6vw,44px) 0 0}
.td-tagged img{width:100%;height:auto}
.td-tag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  margin-top:18px}
.td-tag::before{content:"";width:9px;height:9px;margin-top:7px;border-radius:50%;
  background:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent)}
.td-tag b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(17px,4.4vw,24px);color:#fff}
.td-tag span{display:block;font-size:clamp(11.5px,3vw,13.5px);color:var(--ac);margin-top:3px}

/* Vurgu kartı: ikon + dikey çizgi + metin (image195 "Katmanların Uyumu") */
.td-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,4vw,26px);
  align-items:center;margin:clamp(26px,6vw,40px) 0 0;padding:clamp(18px,4vw,26px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);background:var(--q-black-soft)}
.td-note .ic{width:clamp(46px,12vw,64px);height:clamp(46px,12vw,64px);color:var(--ac)}
.td-note .ic .qi{width:100%;height:100%}
.td-note .txt{padding-left:clamp(16px,4vw,26px);border-left:1px solid var(--q-graphite)}
.td-note b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(17px,4.4vw,24px);color:var(--ac)}
.td-note p{font-size:clamp(12px,3.2vw,15px);line-height:1.55;color:var(--q-body);margin-top:8px}

/* ─────────────── İki sütunlu karşılaştırma (REVİZE 6. ekran) ─────────────── */
.td-vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.6vw,20px);
  margin:clamp(28px,6vw,44px) 0 0}
.td-vs-col{padding:clamp(16px,3.6vw,26px);border:1px solid var(--q-graphite);
  border-radius:var(--r-card);text-align:center}
.td-vs-col.is-quarest{border-color:var(--ac-soft)}
.td-vs-col h3{font-family:var(--font-sans);font-weight:500;letter-spacing:.06em;
  font-size:clamp(12px,3.2vw,15px);line-height:1.35;color:#fff}
.td-vs-col.is-quarest h3{color:var(--ac)}
.td-vs-col .rule{display:block;width:34px;height:1px;margin:12px auto 0;background:var(--q-graphite)}
.td-vs-col.is-quarest .rule{background:var(--ac)}
.td-stack{display:grid;gap:clamp(10px,3vw,18px);margin-top:clamp(16px,4vw,24px);text-align:left}
.td-stack li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  font-size:clamp(10.5px,2.8vw,12.5px);line-height:1.35;color:var(--q-body)}
.td-stack li img{width:100%;height:auto}
.td-stack .lbl::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:middle}
.is-quarest .td-stack .hi{color:var(--ac)}
.td-vs-col p{margin-top:clamp(14px,3.4vw,20px);padding-top:clamp(14px,3.4vw,20px);
  border-top:1px solid var(--q-graphite);font-size:clamp(10.5px,2.8vw,12.5px);
  line-height:1.55;color:var(--q-body);text-align:left}

/* Bölüm ortası ayırıcı — küçük dört köşeli yıldız (REVİZE ekranı) */
.td-star{display:flex;align-items:center;gap:16px;margin:clamp(28px,6vw,44px) 0}
.td-star::before,.td-star::after{content:"";flex:1;height:1px;background:var(--q-graphite)}
.td-star i{width:12px;height:12px;flex:0 0 auto;background:var(--ac);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}

/* Bilgilendirme kutusu */
.td-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  margin:clamp(24px,5vw,36px) 0 0;padding:clamp(16px,3.6vw,22px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card)}
.td-info .qi{width:26px;height:26px;color:var(--ac)}
.td-info p{font-size:clamp(11.5px,3vw,14px);line-height:1.6;color:var(--q-body)}
.td-info b{color:#fff;font-weight:600}

/* ─────────────── Kaynak / rapor bağlantısı ─────────────── */
.td-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,3.4vw,20px);
  align-items:center;margin:clamp(20px,4vw,28px) 0 0;padding:clamp(16px,3.6vw,22px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);
  transition:border-color var(--dur) var(--ease)}
.td-src:hover{border-color:var(--ac-soft)}
.td-src .ic{width:clamp(44px,11vw,58px);height:clamp(44px,11vw,58px);border-radius:50%;
  border:1px solid var(--ac-soft);display:grid;place-items:center;color:var(--ac)}
.td-src .ic .qi{width:46%;height:46%}
.td-src b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(15px,4vw,20px);color:#fff}
.td-src span{display:block;font-size:clamp(11px,2.9vw,13px);color:var(--q-muted);margin-top:4px}
.td-src .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--ac-soft);
  display:grid;place-items:center;color:var(--ac);flex:0 0 auto}
.td-src .go .qi{width:16px;height:16px}

/* ─────────────── Kapanış vurgusu ─────────────── */
.td-claim{margin:clamp(28px,6vw,44px) 0 0;padding:clamp(24px,5vw,36px) clamp(18px,4vw,28px);
  text-align:center;border:1px solid var(--q-graphite);border-radius:var(--r-card);
  background:radial-gradient(ellipse 90% 80% at 50% 0%,
    color-mix(in srgb,var(--ac) 12%,transparent),transparent 70%)}
.td-claim i{display:block;width:14px;height:14px;margin:0 auto 16px;background:var(--ac);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.td-claim b{display:block;font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(21px,5.6vw,34px);line-height:1.2;color:#fff}
.td-claim p{font-size:clamp(12px,3.2vw,15px);line-height:1.6;color:var(--q-body);margin-top:14px}

/* ─────────────── Sonraki teknoloji kartı ───────────────
   `LUXE TOUCH … SON EKRANDAKİ SKİN+ GÖRSEL YERİNE BÖYLE SADECE BUTON OLACAK
   GÖRSEL YOK` → kartta görsel yok, yalnızca metin + yön oku. */
.td-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,4vw,26px);
  align-items:center;margin:clamp(30px,7vw,48px) 0 0;padding:clamp(20px,4.4vw,28px);
  border:1px solid var(--ac-soft);border-radius:var(--r-card);
  background:var(--q-black-soft);transition:var(--dur) var(--ease)}
.td-next:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--q-black-soft))}
.td-next .kick{display:block;font-size:clamp(9.5px,2.5vw,11.5px);font-weight:600;
  letter-spacing:.16em;color:var(--ac)}
.td-next b{display:block;font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(22px,5.8vw,34px);line-height:1.1;color:#fff;margin-top:10px}
.td-next span{display:block;font-size:clamp(11.5px,3vw,14px);line-height:1.5;
  color:var(--q-body);margin-top:8px}
.td-next .go{width:52px;height:52px;border-radius:50%;border:1px solid var(--ac);
  display:grid;place-items:center;color:var(--ac);flex:0 0 auto}
.td-next .go .qi{width:19px;height:19px}

/* ─────────────── Açık zeminli bölüm (Skin+ "Nasıl Çalışır?") ─────────────── */
.td.is-light{background:var(--q-cream);color:var(--q-ink)}
.td.is-light h1,.td.is-light h2,.td.is-light .td-card b,.td.is-light .td-note b{color:var(--q-ink)}
.td.is-light .td-lead,.td.is-light .td-card p,.td.is-light .td-note p{color:var(--q-ink-soft)}
.td.is-light .td-kicker,.td.is-light .o,.td.is-light .td-card .no{color:var(--q-orange-deep)}
.td.is-light .td-rule{background:var(--q-orange-deep)}
.td.is-light .td-card,.td.is-light .td-note,.td.is-light .td-info,.td.is-light .td-src{
  background:#fff;border-color:var(--q-line-light)}
.td.is-light .td-card .ic,.td.is-light .td-note .ic,.td.is-light .td-src .ic{
  border-color:rgba(169,69,1,.35);color:var(--q-orange-deep)}
.td.is-light .td-card--num .txt,.td.is-light .td-note .txt{border-color:var(--q-line-light)}

/* ─────────────── Dar / geniş ekran ─────────────── */
@media(max-width:560px){
  .td-vs{grid-template-columns:1fr}
  .td-note{grid-template-columns:1fr;gap:14px;text-align:center}
  .td-note .ic{margin:0 auto}
  .td-note .txt{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--q-graphite)}
  .td.is-light .td-note .txt{border-color:var(--q-line-light)}
  .td-next{grid-template-columns:1fr;gap:18px}
  .td-next .go{justify-self:start}
}
@media(max-width:400px){
  .td-feats{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .td-feat:nth-child(3)::before{display:none}
}
@media(min-width:900px){
  .td-sec{padding:clamp(84px,7vw,120px) 0}
  .td-lead{font-size:19px}
  .td-feats,.td-cards,.td-vs{max-width:900px;margin-left:auto;margin-right:auto}
  .td-hero-in{max-width:720px}
}

/* ─────────────── Klinik çalışma bileşenleri (Skin+ · image208 · 210) ───────────────
   Bu bölümler Skin+'a özgü: bağımsız dermatolojik değerlendirme sayıları,
   ölçüm kartları ve sertifika. Diğer teknolojilerde kullanılmaz. */
.td-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,2.4vw,18px);margin:clamp(24px,5vw,36px) 0 0;
  padding:clamp(16px,3.6vw,24px);border:1px solid var(--q-graphite);border-radius:var(--r-card);
  background:var(--q-black-soft)}
.td.is-light .td-stats{background:#fff;border-color:var(--q-line-light)}
.td-stat{position:relative;padding:0 clamp(4px,1.6vw,12px);text-align:left}
.td-stat+.td-stat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:var(--q-graphite)}
.td.is-light .td-stat+.td-stat::before{background:var(--q-line-light)}
.td-stat .qi{width:clamp(24px,6.5vw,32px);height:clamp(24px,6.5vw,32px);color:var(--ac);margin-bottom:10px}
.td-stat b{display:block;font-family:var(--font-sans);font-size:clamp(15px,4vw,22px);
  font-weight:600;line-height:1.1;color:#fff}
.td.is-light .td-stat b{color:var(--q-ink)}
.td-stat i{display:block;font-style:normal;font-size:clamp(9px,2.4vw,11px);font-weight:600;
  letter-spacing:.08em;color:var(--q-muted);margin-top:3px}
.td-stat span{display:block;font-size:clamp(9.5px,2.5vw,11.5px);line-height:1.45;
  color:var(--q-muted);margin-top:8px}

/* Ölçüm kartı: solda sonuç, sağda görsel */
.td-measure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;margin:clamp(14px,3vw,20px) 0 0;overflow:hidden;
  border:1px solid var(--q-graphite);border-radius:var(--r-card);background:var(--q-black-soft)}
.td.is-light .td-measure{background:#fff;border-color:var(--q-line-light)}
.td-measure .txt{padding:clamp(16px,3.6vw,24px)}
.td-measure .kick{display:block;font-size:clamp(9px,2.4vw,11px);font-weight:600;
  letter-spacing:.1em;color:var(--ac)}
.td-measure h3{font-family:var(--font-sans);font-weight:400;
  font-size:clamp(12.5px,3.3vw,15px);line-height:1.4;color:#fff;margin-top:14px}
.td.is-light .td-measure h3{color:var(--q-ink)}
.td-measure .val{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(34px,9vw,54px);line-height:1;color:var(--ac);margin-top:6px}
.td-measure .val sup{font-size:.42em;vertical-align:super}
.td-measure p{font-size:clamp(9.5px,2.5vw,11.5px);line-height:1.5;color:var(--q-muted);margin-top:10px}
.td-measure figure{position:relative;min-height:100%}
.td-measure figure img{width:100%;height:100%;object-fit:cover}

/* Dipnot + rapor bağlantısı */
.td-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,3vw,18px);
  align-items:center;margin:clamp(18px,4vw,26px) 0 0;padding:clamp(14px,3.4vw,20px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card)}
.td.is-light .td-foot{border-color:var(--q-line-light);background:var(--q-cream-warm)}
.td-foot>.qi{width:26px;height:26px;color:var(--ac)}
.td-foot p{font-size:clamp(10px,2.7vw,12.5px);line-height:1.6;color:var(--q-muted)}
.td-foot .btn-rapor{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:11px 16px;border:1px solid var(--ac);border-radius:var(--r-sm);
  font-size:clamp(10px,2.6vw,12px);font-weight:600;letter-spacing:.06em;color:var(--ac);
  transition:var(--dur) var(--ease)}
.td-foot .btn-rapor:hover{background:color-mix(in srgb,var(--ac) 12%,transparent)}
.td-foot .btn-rapor .qi{width:14px;height:14px}

/* Ürün satırları (image211) */
.td-products{display:grid;gap:clamp(10px,2.6vw,16px);margin:clamp(26px,6vw,40px) 0 0}
.td-product{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,3.4vw,22px);align-items:center;padding:clamp(16px,3.6vw,24px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);background:var(--q-black-soft);
  transition:var(--dur) var(--ease)}
.td.is-light .td-product{background:#fff;border-color:var(--q-line-light)}
.td-product:hover{border-color:var(--ac)}
.td-product .ic{width:clamp(40px,10vw,54px);height:clamp(40px,10vw,54px);color:var(--ac)}
.td-product .ic .qi{width:100%;height:100%}
.td-product .txt{border-left:1px solid var(--q-graphite);padding-left:clamp(14px,3.4vw,20px)}
.td.is-light .td-product .txt{border-color:var(--q-line-light)}
.td-product b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(19px,5vw,28px);line-height:1.1;color:#fff}
.td.is-light .td-product b{color:var(--q-ink)}
.td-product span{display:block;font-size:clamp(10.5px,2.8vw,12.5px);color:var(--q-muted);margin-top:6px}
.td-product .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--ac);
  display:grid;place-items:center;color:var(--ac);flex:0 0 auto}
.td-product .go .qi{width:16px;height:16px}

/* Sertifika görseli */
.td-cert{margin:clamp(26px,6vw,40px) auto 0;max-width:560px;padding:clamp(14px,3.4vw,22px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);background:var(--q-black-soft)}
.td.is-light .td-cert{background:#fff;border-color:var(--q-line-light)}
.td-cert img{width:100%;height:auto;border-radius:var(--r-sm)}

@media(max-width:560px){
  .td-measure{grid-template-columns:1fr}
  .td-measure figure{min-height:180px}
  .td-foot{grid-template-columns:auto minmax(0,1fr)}
  .td-foot .btn-rapor{grid-column:1/-1;justify-content:center}
  .td-product{grid-template-columns:auto minmax(0,1fr)}
  .td-product .go{grid-column:1/-1;justify-self:end}
}

/* ─────────────── Isı karşılaştırması (Smart Ice · image224) ───────────────
   Solda geleneksel yüzey (sıcak), sağda Smart Ice yüzeyi (serin). İki görsel
   müşteriden ikon olarak geliyor; kart içinde yan yana duruyor. */
.td-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,26px);
  margin:clamp(28px,6vw,44px) 0 0;padding:clamp(16px,3.6vw,26px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);background:var(--q-black-soft)}
.td-compare>div{display:flex;flex-direction:column}
.td-compare h3{font-family:var(--font-sans);font-weight:500;letter-spacing:.08em;
  font-size:clamp(10.5px,2.8vw,13px);line-height:1.35;color:#fff}
.td-compare .is-quarest h3{color:var(--ac)}
.td-compare .rule{display:block;width:30px;height:1px;margin:10px 0 0;background:#7A4A2A}
.td-compare .is-quarest .rule{background:var(--ac)}
.td-compare p{font-size:clamp(10.5px,2.8vw,12.5px);line-height:1.55;color:var(--q-body);
  margin-top:clamp(12px,3vw,16px)}
.td-compare figure{margin-top:auto;padding-top:clamp(14px,3.4vw,20px)}
.td-compare figure img{width:100%;height:auto;border-radius:var(--r-sm)}

/* Ürün vitrini (image225) */
.td-showcase{text-align:center;margin:clamp(28px,6vw,44px) 0 0}
.td-showcase .name{display:block;font-family:var(--font-sans);font-size:clamp(12px,3.2vw,15px);
  font-weight:500;letter-spacing:.16em;color:#fff}
.td-showcase p{font-size:clamp(12px,3.2vw,15px);line-height:1.6;color:var(--q-body);
  max-width:520px;margin:14px auto 0}
.td-showcase figure{margin:clamp(24px,5vw,36px) 0 0;position:relative}
.td-showcase figure img{width:100%;height:auto}
.td-showcase .kick{display:block;margin-top:clamp(22px,5vw,32px);
  font-size:clamp(11px,2.9vw,13px);font-weight:600;color:var(--ac)}
.td-showcase b{display:block;font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(34px,9vw,56px);line-height:1.05;color:#fff;margin-top:8px}
.td-showcase .sub{font-size:clamp(12px,3.2vw,15px);line-height:1.5;color:var(--q-body);margin-top:12px}
.td-showcase .ks-cta,.td-showcase .td-btn{margin-top:clamp(22px,5vw,30px)}
.td-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
  max-width:480px;min-height:56px;padding:16px 26px;border-radius:var(--r-btn);
  background:var(--ac);color:#fff;font-size:clamp(12px,3.2vw,14px);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;transition:var(--dur) var(--ease)}
.td-btn:hover{filter:brightness(1.1)}
.td-btn .qi{width:17px;height:17px}
.td-btn--line{background:none;border:1px solid var(--ac);color:var(--ac)}
.td-btn--line:hover{background:color-mix(in srgb,var(--ac) 12%,transparent);filter:none}

@media(max-width:480px){
  .td-compare{grid-template-columns:1fr;gap:22px}
}

/* ─────────────── İkonsuz özellik şeridi (3D Spacer image233 · Hava image279)
   Bu iki sayfada özelliklerin ikonu yok: kısa çizgi + iki satır metin. */
.td-feats--plain .td-feat{padding-top:14px;border-top:2px solid var(--ac);
  border-left:0;text-align:left}
.td-feats--plain{gap:clamp(10px,3vw,22px)}
.td-feats--plain .td-feat+.td-feat::before{display:none}

/* ─────────────── Platform kartları (3D Spacer image236) ─────────────── */
.td-plats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.6vw,20px);
  margin:clamp(24px,5vw,36px) 0 0}
.td-plat{display:flex;flex-direction:column;padding:clamp(16px,3.6vw,24px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);
  transition:border-color var(--dur) var(--ease)}
.td-plat:hover{border-color:var(--pc,var(--ac))}
.td-plat .mark{font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,8vw,46px);line-height:1;color:var(--pc,var(--ac))}
.td-plat .kind{display:block;font-size:clamp(9.5px,2.5vw,11.5px);font-weight:600;
  letter-spacing:.16em;color:#fff;margin-top:4px}
.td-plat .rule{display:block;height:1px;margin:clamp(14px,3.4vw,20px) 0;background:var(--q-graphite)}
.td-plat .feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  font-size:clamp(10.5px,2.8vw,12.5px);line-height:1.4;color:var(--q-body)}
.td-plat .feat .qi{width:24px;height:24px;color:var(--pc,var(--ac))}
.td-plat .go{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:clamp(14px,3.4vw,20px);
  font-size:clamp(10.5px,2.8vw,13px);color:#fff}
.td-plat .go .qi{width:18px;height:18px;color:var(--pc,var(--ac))}

/* ─────────────── Adım ilerlemesi (Hava image279–282: "01 / 04") ─────────────── */
.td-step{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,4vw,26px)}
.td-step b{font-family:var(--font-sans);font-size:clamp(12px,3.2vw,14px);font-weight:600;
  letter-spacing:.06em;color:var(--ac)}
.td-step span{font-size:clamp(12px,3.2vw,14px);color:#5D626A}
.td-step i{flex:1;display:flex;gap:6px}
.td-step i em{flex:1;height:2px;background:var(--q-graphite);border-radius:2px}
.td-step i em.on{background:var(--ac)}

/* İki kolonlu teknoloji eşleşmesi (Hava image280 · Konfor image246) */
.td-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(8px,2.4vw,18px);margin:clamp(24px,5vw,36px) 0 0;text-align:center}
.td-pair .op{font-family:var(--font-sans);font-size:clamp(20px,5vw,30px);
  font-weight:300;color:var(--ac)}
.td-pair b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(15px,4vw,22px);color:var(--ac)}
.td-pair span{display:block;font-size:clamp(10px,2.7vw,12.5px);color:var(--q-muted);margin-top:5px}
.td-pair img{width:100%;height:auto;margin-top:12px;border-radius:var(--r-sm)}

/* Bölüm başlığı ayırıcısı (Hava image280: "ORTAK MİMARİ TEMEL") */
.td-band{display:flex;align-items:center;gap:14px;margin:clamp(26px,6vw,40px) 0 0;
  font-size:clamp(9.5px,2.5vw,11.5px);font-weight:600;letter-spacing:.18em;color:var(--q-muted)}
.td-band::before,.td-band::after{content:"";flex:1;height:1px;background:var(--q-graphite)}

/* Numaralı hedef listesi (Hava image281) */
.td-goals{display:grid;gap:0;margin:clamp(26px,6vw,40px) 0 0}
.td-goal{display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(12px,3vw,22px);align-items:center;padding:clamp(18px,4vw,26px) 0;
  border-top:1px solid var(--q-graphite)}
.td-goal .no{font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,8vw,46px);line-height:1;color:var(--ac)}
.td-goal .ic{width:clamp(48px,12vw,62px);height:clamp(48px,12vw,62px);border-radius:50%;
  border:1px solid var(--ac-soft);display:grid;place-items:center;color:var(--ac)}
.td-goal .ic .qi{width:46%;height:46%}
.td-goal .kick{display:block;font-size:clamp(9px,2.4vw,11px);font-weight:600;
  letter-spacing:.14em;color:var(--ac)}
.td-goal b{display:block;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(18px,4.8vw,26px);color:#fff;margin-top:5px}
.td-goal p{font-size:clamp(10.5px,2.8vw,13px);line-height:1.55;color:var(--q-body);margin-top:8px}

@media(max-width:480px){
  .td-plats{grid-template-columns:1fr}
  .td-goal{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .td-goal .ic{display:none}
  .td-pair{grid-template-columns:1fr;gap:14px}
  .td-pair .op{transform:rotate(90deg)}
}

/* Alıntı satırı — sol bakır çizgi (Adaptive Flex REVİZE 1. ekran) */
.td-quote-line{margin:clamp(30px,7vw,50px) 0 0;padding-left:clamp(14px,3.4vw,20px);
  border-left:2px solid var(--ac);font-family:var(--font-serif);font-weight:400;
  font-size:clamp(17px,4.6vw,26px);line-height:1.35;color:#fff}

/* ═══════════════════════════════════════════════════════════════════
   DENEYİM BÖLÜMÜ bileşenleri
   Sayfalar: deneyim-zone-1.html · deneyim-uzaktan-karar.html
   Referans: `web sitesi deneyim bölümü.xlsx` → zone-1-deneyim-merkezi-ekranlar/
   ═══════════════════════════════════════════════════════════════════ */

/* Konum kartı (Zone-1 hero altı) */
.dn-loc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,3vw,18px);
  align-items:center;margin:clamp(14px,3vw,20px) 0 0;padding:clamp(14px,3.4vw,20px);
  border:1px solid var(--q-graphite);border-radius:var(--r-card);background:var(--q-black-soft);
  transition:border-color var(--dur) var(--ease)}
.dn-loc:hover{border-color:var(--ac-soft)}
.dn-loc>.qi{width:26px;height:26px;color:var(--ac)}
.dn-loc .kick{display:block;font-size:clamp(9px,2.4vw,11px);font-weight:600;
  letter-spacing:.14em;color:var(--ac)}
.dn-loc b{display:block;font-size:clamp(13px,3.4vw,16px);font-weight:500;color:#fff;margin-top:4px}
.dn-loc span{display:block;font-size:clamp(11px,2.9vw,13px);color:var(--q-muted);margin-top:2px}
.dn-loc .go{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:clamp(10px,2.7vw,12px);font-weight:600;letter-spacing:.06em;color:var(--ac)}
.dn-loc .go .qi{width:15px;height:15px}

/* Üç daireli akış (Zone-1 "Önce sistemi deneyimleyin") */
.dn-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(6px,2vw,18px);margin:clamp(30px,7vw,48px) 0 0;text-align:center;position:relative}
.dn-flow>li{position:relative}
.dn-flow .no{display:block;font-family:var(--font-sans);font-size:clamp(20px,5.4vw,30px);
  font-weight:300;color:var(--ac);margin-bottom:12px}
.dn-flow figure{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid var(--ac-soft)}
.dn-flow figure img{width:100%;height:100%;object-fit:cover}
/* Daireler arası yön oku */
.dn-flow>li+li::before{content:"›";position:absolute;left:calc(-1 * clamp(6px,2vw,18px) / 2);
  top:calc(clamp(20px,5.4vw,30px) + 12px + 50%);translate:-50% -50%;
  color:var(--ac);font-size:clamp(16px,4vw,22px);line-height:1}
/* Daireden başlığa inen noktalı çizgi */
.dn-flow .dots{display:block;width:1px;height:clamp(20px,5vw,32px);margin:10px auto;
  background:repeating-linear-gradient(180deg,var(--ac) 0 3px,transparent 3px 8px)}
.dn-flow b{display:block;font-size:clamp(10px,2.7vw,13px);font-weight:600;
  letter-spacing:.08em;color:#fff}
.dn-flow span{display:block;font-size:clamp(9.5px,2.5vw,12px);line-height:1.45;
  color:var(--q-muted);margin-top:7px}

/* Kapanış cümlesi — üstte ve altta ince çizgi */
.dn-quote{margin:clamp(28px,6vw,44px) auto 0;max-width:520px;padding:clamp(20px,4.4vw,28px) 0;
  border-top:1px solid var(--q-graphite);border-bottom:1px solid var(--q-graphite);
  text-align:center;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(19px,5vw,30px);line-height:1.25;color:#fff}

/* Yatay adım şeridi (DENEYİMLE → KEŞFET → KARAR VER) */
.dn-steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(10px,3vw,22px);margin:clamp(24px,5vw,36px) 0 0}
.dn-steps b{font-size:clamp(11px,3vw,15px);font-weight:600;letter-spacing:.1em;color:#fff}
.dn-steps .qi{width:clamp(22px,6vw,32px);height:clamp(22px,6vw,32px);color:var(--ac)}

/* Bilgi şeridi (çalışma saatleri · iletişim · randevu) */
.dn-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,2.4vw,20px);margin:clamp(26px,6vw,40px) 0 0;
  padding-top:clamp(20px,4.4vw,28px);border-top:1px solid var(--q-graphite)}
.dn-info>li{position:relative;padding:0 clamp(4px,1.6vw,14px)}
.dn-info>li+li::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--q-graphite)}
.dn-info .qi{width:clamp(20px,5vw,26px);height:clamp(20px,5vw,26px);color:var(--ac);margin-bottom:10px}
.dn-info b{display:block;font-size:clamp(9px,2.4vw,11px);font-weight:600;
  letter-spacing:.1em;color:var(--ac)}
.dn-info span{display:block;font-size:clamp(10px,2.7vw,12.5px);line-height:1.5;
  color:var(--q-body);margin-top:7px}
.dn-info em{display:block;font-style:normal;color:#fff}

@media(max-width:400px){
  .dn-loc{grid-template-columns:auto minmax(0,1fr)}
  .dn-loc .go{grid-column:1/-1;justify-self:start}
  .dn-info{grid-template-columns:1fr;gap:16px}
  .dn-info>li+li::before{display:none}
  .dn-info>li+li{padding-top:16px;border-top:1px solid var(--q-graphite)}
}
@media(min-width:900px){
  .dn-flow,.dn-info{max-width:760px;margin-left:auto;margin-right:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   SEPET SAYFASI (image48'deki sipariş özeti düzeniyle aynı dil)
   Açık zeminli — çizilen checkout ekranları öyle.
   ═══════════════════════════════════════════════════════════════════ */
.ck{background:var(--q-cream);color:var(--q-ink);min-height:60vh;
  padding:calc(var(--header-height,78px) + 24px) 0 clamp(48px,10vw,90px)}
.ck .wrap{max-width:760px}
.ck h1{font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(21px,5.4vw,30px);color:var(--q-ink)}
.ck-lead{font-size:clamp(12.5px,3.3vw,15px);color:var(--q-ink-soft);margin-top:8px}

/* Adım göstergesi — üstte sabit (image55: "step indicator üstte sabit kalacak") */
.ck-steps{position:sticky;top:var(--header-now,88px);z-index:20;list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(18px,4vw,26px) 0 clamp(22px,5vw,32px);padding:14px 0;
  background:var(--q-cream)}
.ck-steps li{position:relative;text-align:center;font-size:clamp(9.5px,2.5vw,11.5px);
  color:var(--q-ink-soft)}
.ck-steps li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:1px;
  background:var(--q-line-light)}
.ck-steps li:first-child::before{display:none}
.ck-steps .no{position:relative;z-index:1;display:grid;place-items:center;
  width:28px;height:28px;margin:0 auto 8px;border-radius:50%;
  border:1px solid var(--q-line-light);background:#fff;
  font-size:12px;font-weight:600;color:var(--q-ink-soft)}
.ck-steps .no .qi{width:14px;height:14px}
.ck-steps [data-durum="tamam"] .no{border-color:var(--q-ink);background:#fff;color:var(--q-ink)}
.ck-steps [data-durum="aktif"] .no{border-color:var(--q-ink);background:var(--q-ink);color:#fff}
.ck-steps [data-durum="aktif"]{color:var(--q-ink);font-weight:600}

.ck-card{background:#fff;border:1px solid var(--q-line-light);border-radius:var(--r-card);
  padding:clamp(16px,3.6vw,22px);margin-top:clamp(12px,3vw,16px)}
.ck-card h2{font-family:var(--font-sans);font-weight:600;font-size:clamp(13px,3.4vw,15px);
  color:var(--q-ink)}
.ck-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:clamp(12px,3vw,16px);border-bottom:1px solid var(--q-line-light)}
.ck-head span{font-size:clamp(11px,2.9vw,13px);color:var(--q-ink-soft)}

/* Satırlar */
.ck-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,3vw,18px);
  align-items:center;padding:clamp(14px,3.4vw,18px) 0;border-bottom:1px solid var(--q-line-light)}
.ck-line:last-of-type{border-bottom:0}
.ck-line img{width:clamp(64px,17vw,92px);height:auto;border-radius:var(--r-sm);background:#F2EEEA}
.ck-line b{display:block;font-size:clamp(13px,3.4vw,15px);font-weight:600;color:var(--q-ink)}
.ck-line .var{display:block;font-size:clamp(11px,2.9vw,12.5px);color:var(--q-ink-soft);margin-top:4px}
.ck-line .fiyat{font-size:clamp(13px,3.4vw,16px);font-weight:600;color:var(--q-ink);white-space:nowrap}
.ck-qty{display:inline-flex;align-items:center;gap:2px;margin-top:10px;
  border:1px solid var(--q-line-light);border-radius:var(--r-pill);overflow:hidden}
.ck-qty button{width:34px;height:34px;border:0;background:#fff;color:var(--q-ink);font-size:16px}
.ck-qty button:hover{background:#F2EEEA}
.ck-qty button[disabled]{opacity:.35}
.ck-qty output{min-width:26px;text-align:center;font-size:13px;color:var(--q-ink)}
.ck-sil{display:inline-flex;align-items:center;gap:6px;margin-top:10px;margin-left:12px;
  background:none;border:0;padding:8px 0;font-size:clamp(11px,2.9vw,12.5px);color:var(--q-ink-soft)}
.ck-sil:hover{color:#A94501}

/* Toplamlar */
.ck-sum{display:grid;gap:10px;margin-top:clamp(14px,3.4vw,18px);
  padding-top:clamp(14px,3.4vw,18px);border-top:1px solid var(--q-line-light)}
.ck-sum div{display:flex;justify-content:space-between;gap:12px;
  font-size:clamp(12px,3.2vw,14px);color:var(--q-ink-soft)}
.ck-sum .ucretsiz{color:#A94501}
.ck-sum .toplam{padding-top:12px;border-top:1px solid var(--q-line-light);
  font-size:clamp(16px,4.4vw,22px);font-weight:600;color:var(--q-ink)}
.ck-sum .kdv{justify-content:flex-end;font-size:11px}
.ck-sum div[hidden]{display:none}

.ck-cta{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  min-height:58px;margin-top:clamp(18px,4vw,24px);padding:16px 22px;border:0;
  border-radius:var(--r-btn);background:#17171A;color:#fff;
  font-family:var(--font-sans);font-size:clamp(12.5px,3.3vw,14px);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:var(--dur) var(--ease)}
.ck-cta:hover{background:var(--q-orange-deep)}
.ck-cta .qi{width:18px;height:18px}
.ck-geri{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:clamp(12px,3.2vw,13.5px);color:var(--q-ink-soft)}
.ck-geri .qi{width:15px;height:15px;transform:rotate(180deg)}
.ck-geri:hover{color:var(--q-ink)}

/* Güvence şeridi */
.ck-trust{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  margin-top:clamp(12px,3vw,16px);padding:clamp(14px,3.4vw,18px);
  background:#fff;border:1px solid var(--q-line-light);border-radius:var(--r-card)}
.ck-trust>.qi{width:26px;height:26px;color:var(--q-ink)}
.ck-trust b{display:block;font-size:clamp(12px,3.2vw,13.5px);font-weight:600;color:var(--q-ink)}
.ck-trust span{display:block;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft);margin-top:3px}
.ck-trust .marka{font-family:var(--font-sans);font-weight:700;font-size:15px;color:#1E64FF}

/* Boş sepet */
.ck-bos{text-align:center;padding:clamp(30px,7vw,50px) 0}
.ck-bos .qi{width:52px;height:52px;color:var(--q-ink-soft);margin-bottom:16px}
.ck-bos p{font-size:clamp(13px,3.4vw,16px);color:var(--q-ink-soft)}
.ck-bos .ck-cta{max-width:340px;margin-left:auto;margin-right:auto}

/* ─────────────── Ödeme adımları (image48 · 49 · 52) ───────────────
   image55: "Her adım mevcut ekranı replace edecek. Back ile bir önceki adıma
   dönülecek ve girilmiş bilgiler korunacak. Step indicator üstte sabit." */
.ck-step[hidden]{display:none}
.ck-baslik{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,3.4vw,20px)}
.ck-baslik .qi{width:18px;height:18px;transform:rotate(180deg);color:var(--q-ink-soft)}

.ck-alan{margin-top:clamp(14px,3.4vw,18px)}
.ck-alan label{display:flex;align-items:center;gap:8px;font-size:clamp(11.5px,3vw,13px);
  font-weight:600;color:var(--q-ink);margin-bottom:8px}
.ck-alan .tag{font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);
  background:#F1EBE5;color:var(--q-orange-deep)}
.ck-alan input,.ck-alan textarea{width:100%;min-height:52px;padding:14px 16px;
  border:1px solid var(--q-line-light);border-radius:var(--r-input);background:#fff;
  color:var(--q-ink);font-family:var(--font-sans);font-size:15px}
.ck-alan textarea{min-height:88px;resize:vertical}
.ck-alan input:focus-visible,.ck-alan textarea:focus-visible{
  outline:2px solid var(--q-orange-deep);outline-offset:1px}
.ck-alan .hint{display:block;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft);margin-top:7px}
.ck-ikili{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.6vw,14px)}
.ck-onay{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  margin-top:clamp(14px,3.4vw,18px);font-size:clamp(11.5px,3vw,13px);line-height:1.55;
  color:var(--q-ink-soft)}
.ck-onay input{width:20px;height:20px;margin-top:2px;accent-color:var(--q-orange-deep)}
.ck-onay a{color:var(--q-orange-deep);text-decoration:underline}

.ck-yontem{display:grid;gap:10px;margin-top:clamp(12px,3vw,16px)}
.ck-sec{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:clamp(14px,3.4vw,18px);border:1px solid var(--q-line-light);border-radius:var(--r-card);
  background:#fff;text-align:left;font:inherit;transition:var(--dur) var(--ease)}
.ck-sec[aria-pressed="true"]{border-color:var(--q-orange-deep);background:#FFF8F2}
.ck-sec .radyo{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--q-line-light);
  display:grid;place-items:center}
.ck-sec[aria-pressed="true"] .radyo{border-color:var(--q-orange-deep)}
.ck-sec[aria-pressed="true"] .radyo::after{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--q-orange-deep)}
.ck-sec>.qi{width:26px;height:26px;color:var(--q-ink)}
.ck-sec b{display:block;font-size:clamp(12.5px,3.3vw,14px);font-weight:600;color:var(--q-ink)}
.ck-sec span{display:block;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft);margin-top:3px}
.ck-rozet{font-size:10.5px;font-weight:600;padding:5px 10px;border-radius:var(--r-pill);
  background:#E8F5E9;color:#2E7D32;white-space:nowrap}

.ck-taksit{display:grid;gap:0;margin-top:clamp(12px,3vw,16px);border:1px solid var(--q-line-light);
  border-radius:var(--r-card);overflow:hidden;background:#fff}
.ck-taksit li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px}
.ck-taksit li+li{border-top:1px solid var(--q-line-light)}
.ck-taksit .radyo{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--q-line-light)}
.ck-taksit b{display:block;font-size:clamp(12.5px,3.3vw,14px);color:var(--q-ink)}
.ck-taksit small{display:block;font-size:11px;color:var(--q-ink-soft);margin-top:2px}
.ck-taksit .tutar{text-align:right;font-size:clamp(12.5px,3.3vw,14px);font-weight:600;
  color:var(--q-ink);white-space:nowrap}
.ck-taksit .tutar small{font-weight:400}
.ck-onerilen{font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);
  background:#F1EBE5;color:var(--q-orange-deep);margin-left:8px}

.ck-banka{display:grid;gap:0;margin-top:clamp(12px,3vw,16px);border:1px solid var(--q-line-light);
  border-radius:var(--r-card);overflow:hidden;background:#fff}
.ck-banka li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px}
.ck-banka li+li{border-top:1px solid var(--q-line-light)}
.ck-banka .qi{width:22px;height:22px;color:var(--q-ink-soft)}
.ck-banka span{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--q-ink-soft)}
.ck-banka b{display:block;font-size:clamp(12px,3.2vw,14px);color:var(--q-ink);margin-top:3px;
  overflow-wrap:break-word}
.ck-kopyala{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  border:1px solid var(--q-line-light);border-radius:var(--r-pill);background:#fff;
  font-size:11.5px;color:var(--q-ink);white-space:nowrap}
.ck-kopyala .qi{width:14px;height:14px}
.ck-kopyala[data-kopyalandi]{border-color:#2E7D32;color:#2E7D32}

.ck-bilgi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  margin-top:clamp(12px,3vw,16px);padding:clamp(14px,3.4vw,18px);
  border:1px solid var(--q-line-light);border-radius:var(--r-card);background:var(--q-cream-warm)}
.ck-bilgi .qi{width:22px;height:22px;color:var(--q-ink-soft)}
.ck-bilgi p{font-size:clamp(11px,2.9vw,12.5px);line-height:1.6;color:var(--q-ink-soft)}

.ck-blok{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.ck-duzenle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 0;
  font-size:clamp(11px,2.9vw,12.5px);color:var(--q-orange-deep)}
.ck-duzenle .qi{width:14px;height:14px}
.ck-ozet-satir{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;
  margin-top:clamp(12px,3vw,16px)}
.ck-ozet-satir>.qi{width:22px;height:22px;color:var(--q-ink-soft);margin-top:2px}
.ck-ozet-satir b{display:block;font-size:clamp(12.5px,3.3vw,14px);color:var(--q-ink)}
.ck-ozet-satir p{font-size:clamp(11px,2.9vw,12.5px);line-height:1.6;color:var(--q-ink-soft);margin-top:4px;
  white-space:pre-line}
.ck-ozet-satir .sag{text-align:right;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft);
  line-height:1.6;white-space:nowrap}

.ck-sozlesme{display:grid;gap:0;margin-top:clamp(12px,3vw,16px);
  border:1px solid var(--q-line-light);border-radius:var(--r-card);overflow:hidden;background:#fff}
.ck-sozlesme a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px}
.ck-sozlesme a+a{border-top:1px solid var(--q-line-light)}
.ck-sozlesme .qi{width:20px;height:20px;color:var(--q-ink-soft)}
.ck-sozlesme b{display:block;font-size:clamp(12px,3.2vw,13.5px);color:var(--q-ink)}
.ck-sozlesme span{display:block;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft);margin-top:3px}

.ck-cta[disabled]{opacity:.45;cursor:not-allowed}
.ck-cta[disabled]:hover{background:#17171A}
.ck-son-not{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft);text-align:center}
.ck-son-not .qi{width:14px;height:14px;flex:0 0 auto}

@media(max-width:480px){
  .ck-ikili{grid-template-columns:1fr}
  .ck-sec{grid-template-columns:auto auto minmax(0,1fr)}
  .ck-rozet{grid-column:1/-1;justify-self:start}
}


/* ═══════════════════════════════════════════════════════════════════
   SİPARİŞ SONUCU (01-image51 · 17-image54)
   Checkout'un son halkası. `.ck` ailesiyle aynı açık zemin dili.
   Üç durum: kart ödemesi başarılı · havale/EFT bildirimi alındı · hata.
   ═══════════════════════════════════════════════════════════════════ */
.sn-top{text-align:center;padding-top:clamp(6px,2vw,14px)}
.sn-seal{width:84px;height:84px;margin:0 auto clamp(18px,4.4vw,26px);border-radius:50%;
  display:grid;place-items:center;border:1.5px solid var(--q-orange-deep);
  background:radial-gradient(circle,rgba(169,69,1,.08),transparent 70%)}
.sn-seal .qi{width:38px;height:38px;color:var(--q-orange-deep)}
.sn-top h1{font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(24px,6.2vw,34px);color:var(--q-ink)}
.sn-top p{font-size:clamp(13px,3.4vw,15.5px);line-height:1.6;color:var(--q-ink-soft);
  margin-top:10px}

/* Bekleme (havale) ve hata durumlarında mühür rengi değişir */
.sn-seal[data-durum="bekliyor"]{border-color:#B07A16;
  background:radial-gradient(circle,rgba(176,122,22,.10),transparent 70%)}
.sn-seal[data-durum="bekliyor"] .qi{color:#B07A16}
.sn-seal[data-durum="hata"]{border-color:#B3261E;
  background:radial-gradient(circle,rgba(179,38,30,.09),transparent 70%)}
.sn-seal[data-durum="hata"] .qi{color:#B3261E}

/* Sipariş künyesi — numara · tarih · ödeme durumu */
.sn-kunye{display:grid;gap:0;margin-top:clamp(22px,5vw,32px)}
.sn-kunye li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:15px 0}
.sn-kunye li+li{border-top:1px solid var(--q-line-light)}
.sn-kunye .yuvarlak{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--q-cream-warm);border:1px solid var(--q-line-light)}
.sn-kunye .yuvarlak .qi{width:20px;height:20px;color:var(--q-ink)}
.sn-kunye span.et{display:block;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft)}
.sn-kunye b{display:block;font-size:clamp(14px,3.6vw,16px);font-weight:600;
  color:var(--q-ink);margin-top:3px;letter-spacing:.01em}
.sn-kunye .iyzico{font-size:clamp(13px,3.4vw,16px);font-weight:700;color:#1E64FF;
  letter-spacing:-.02em}

/* Ödeme durumu rozeti */
.sn-durum{display:inline-flex;align-items:center;gap:7px}
.sn-durum::after{content:"";width:8px;height:8px;border-radius:50%;background:#2E7D32}
.sn-durum[data-durum="bekliyor"]::after{background:#B07A16}
.sn-durum[data-durum="hata"]::after{background:#B3261E}

.sn-kopyala{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border:1px solid var(--q-line-light);border-radius:var(--r-pill);background:#fff;
  font-size:12px;font-weight:500;color:var(--q-ink);transition:var(--dur) var(--ease)}
.sn-kopyala:hover{border-color:var(--q-ink)}
.sn-kopyala[data-kopyalandi]{border-color:#2E7D32;color:#2E7D32}
.sn-kopyala .qi{width:14px;height:14px}

/* Teslimat şeridi — tahmini süre + ana CTA */
.sn-teslim{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;
  align-items:center}
.sn-teslim>.qi{width:30px;height:30px;color:var(--q-orange-deep)}
.sn-teslim .et{display:block;font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft)}
.sn-teslim b{display:block;font-size:clamp(15px,3.8vw,17px);font-weight:600;
  color:var(--q-ink);margin:2px 0 3px}
.sn-teslim small{font-size:clamp(10.5px,2.8vw,12px);color:var(--q-ink-soft)}
.sn-teslim .sag{display:grid;justify-items:end;gap:10px}
/* Çizimde (image51) teslimat metni ve "Siparişimi Takip Et" yan yana. Gerçek
   393px'te buton uppercase hâliyle sığmıyor — dar ekranda alta alınır. */
@media(max-width:459px){
  .sn-teslim{grid-template-columns:auto minmax(0,1fr)}
  .sn-teslim .sag{grid-column:1/-1;justify-items:center;margin-top:4px}
  .sn-teslim .sag .sn-btn{width:100%}
}

/* Ana ve ikincil eylemler */
.sn-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:15px 24px;border-radius:var(--r-btn);background:var(--q-orange-deep);color:#fff;
  font-size:clamp(12px,3.1vw,13.5px);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;transition:var(--dur) var(--ease)}
.sn-btn:hover{background:var(--q-orange-bright)}
.sn-btn .qi{width:16px;height:16px}
.sn-btn--line{background:#fff;color:var(--q-ink);border:1px solid var(--q-line-light)}
.sn-btn--line:hover{background:#fff;border-color:var(--q-ink)}
.sn-btn--line .qi{color:var(--q-ink)}
.sn-link{display:inline-flex;align-items:center;gap:7px;font-size:clamp(12px,3.1vw,13.5px);
  font-weight:500;color:var(--q-ink)}
.sn-link .qi{width:14px;height:14px;color:var(--q-orange-deep)}
.sn-link:hover{color:var(--q-orange-deep)}

/* Bilgilendirme satırı (e-posta gönderildi vb.) */
.sn-not{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.sn-not>.qi{width:24px;height:24px;color:var(--q-ink-soft)}
.sn-not p{font-size:clamp(12px,3.1vw,13.5px);line-height:1.55;color:var(--q-ink)}
.sn-not small{display:block;font-size:clamp(11px,2.9vw,12.5px);color:var(--q-ink-soft);
  margin-top:3px;word-break:break-word}

/* Sonraki adımlar listesi (havale yolunda) */
.sn-adimlar{counter-reset:sn;display:grid;gap:0}
.sn-adimlar li{counter-increment:sn;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px;padding:14px 0}
.sn-adimlar li+li{border-top:1px solid var(--q-line-light)}
.sn-adimlar li::before{content:counter(sn);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--q-ink);color:#fff;
  font-size:12px;font-weight:600}
.sn-adimlar b{display:block;font-size:clamp(13px,3.4vw,15px);font-weight:600;color:var(--q-ink)}
.sn-adimlar p{font-size:clamp(11.5px,3vw,13px);line-height:1.55;color:var(--q-ink-soft);
  margin-top:3px}

.sn-eylem{display:grid;gap:10px;margin-top:clamp(18px,4vw,24px)}
.sn-eylem.ikili{grid-template-columns:1fr 1fr}
@media(max-width:480px){.sn-eylem.ikili{grid-template-columns:1fr}}

/* ─── Sepette satılamayan kalem (QA şartnamesi §2.1 · S-06) ─── */
.ck-line--durdu{border:1px solid rgba(179,38,30,.35);border-radius:var(--r-card);
  padding:clamp(12px,3vw,16px);background:rgba(179,38,30,.03)}
.ck-stok-uyari{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:10px;align-items:start;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--q-line-light);
  font-size:clamp(11.5px,3vw,13px);line-height:1.6;color:#B3261E}
.ck-stok-uyari .qi{width:16px;height:16px;margin-top:2px;color:#B3261E}
.ck-engel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  margin-bottom:14px;padding:clamp(14px,3.4vw,18px);border:1px solid rgba(179,38,30,.35);
  border-radius:var(--r-card);background:rgba(179,38,30,.04);
  font-size:clamp(12px,3.1vw,13.5px);line-height:1.6;color:#B3261E}
.ck-engel .qi{width:18px;height:18px;margin-top:1px;color:#B3261E}
.ck-cta.pasif{opacity:.45;pointer-events:none}