/* ═══════════════════════════════════════
   TEKNOBLOG AFFILIATE — Frontend CSS
   ═══════════════════════════════════════ */

/* ── Tokens ──────────────────────────── */
:root {
  --tkb-primary:   #F04A0A;
  --tkb-blue:      #0A64F0;
  --tkb-green:     #16a34a;
  --tkb-orange:    #ea580c;
  --tkb-red:       #dc2626;
  --tkb-border:    #e5e7eb;
  --tkb-surface:   #f9fafb;
  --tkb-text:      #111827;
  --tkb-muted:     #6b7280;
  --tkb-radius:    8px;
  --tkb-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --tkb-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}

/* ── CTA Buttons ─────────────────────── */
.tkb-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .5em;
  padding:        .65em 1.25em;
  border-radius:  var(--tkb-radius);
  font-size:      .9rem;
  font-weight:    600;
  line-height:    1;
  text-decoration: none;
  cursor:         pointer;
  border:         none;
  transition:     filter .15s, transform .1s, box-shadow .15s;
  white-space:    nowrap;
}
.tkb-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--tkb-shadow-md); }
.tkb-btn:active { transform: translateY(0); filter: brightness(.96); }

.tkb-btn--primary { background: var(--tkb-primary); color: #fff; }
.tkb-btn--blue    { background: var(--tkb-blue);    color: #fff; }
.tkb-btn--green   { background: var(--tkb-green);   color: #fff; }
.tkb-btn--orange  { background: var(--tkb-orange);  color: #fff; }
.tkb-btn--red     { background: var(--tkb-red);     color: #fff; }
.tkb-btn--ghost   { background: transparent; color: var(--tkb-text); border: 1.5px solid var(--tkb-border); }
.tkb-btn--ghost:hover { border-color: var(--tkb-primary); color: var(--tkb-primary); }

.tkb-btn__icon { flex-shrink:0; width:1em; height:1em; }

/* ── Product Box ─────────────────────── */
.tkb-product {
  display:       flex;
  gap:           1.25rem;
  border:        1.5px solid var(--tkb-border);
  border-radius: 12px;
  overflow:      hidden;
  background:    #fff;
  box-shadow:    var(--tkb-shadow);
  margin:        1.5rem 0;
}
.tkb-product--vertical { flex-direction: column; }

.tkb-product__image { flex-shrink:0; }
.tkb-product__image img {
  display:    block;
  width:      200px;
  height:     200px;
  object-fit: contain;
  padding:    1rem;
}
.tkb-product--vertical .tkb-product__image img {
  width: 100%; height: 220px;
}

.tkb-product__body  { flex: 1; padding: 1.25rem 1.25rem 1.25rem 0; display: flex; flex-direction: column; gap: .5rem; }
.tkb-product--vertical .tkb-product__body { padding: 0 1.25rem 1.25rem; }

.tkb-product__badge {
  display:       inline-block;
  background:    var(--tkb-primary);
  color:         #fff;
  font-size:     .7rem;
  font-weight:   700;
  padding:       .2em .6em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
  align-self: flex-start;
}
.tkb-product__title { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--tkb-text); }
.tkb-product__price { font-size: 1.3rem; font-weight: 700; color: var(--tkb-primary); }
.tkb-product__buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }

/* Rating */
.tkb-product__rating { display:flex; align-items:center; gap:.4rem; }
.tkb-stars  { color: #f59e0b; letter-spacing: .05em; font-size: 1.1rem; }
.tkb-rating-val { color: var(--tkb-muted); font-size: .85rem; }

/* ── Compare Table ───────────────────── */
.tkb-compare-wrap {
  overflow-x: auto;
  margin:     1.5rem 0;
  border-radius: 12px;
  border:     1.5px solid var(--tkb-border);
  box-shadow: var(--tkb-shadow);
}
.tkb-compare {
  width:           100%;
  border-collapse: collapse;
  background:      #fff;
  font-size:       .9rem;
}
.tkb-compare th {
  background:  var(--tkb-surface);
  padding:     .75rem 1rem;
  text-align:  center;
  font-weight: 700;
  border-bottom: 2px solid var(--tkb-border);
  position: relative;
}
.tkb-compare th:first-child { text-align: left; }
.tkb-compare td {
  padding:     .65rem 1rem;
  text-align:  center;
  border-bottom: 1px solid var(--tkb-border);
  vertical-align: middle;
}
.tkb-compare td:first-child { text-align: left; }
.tkb-compare tr:last-child td { border-bottom: none; }
.tkb-compare tr:hover td { background: var(--tkb-surface); }

.tkb-compare__label { color: var(--tkb-muted); font-size: .85rem; }
.tkb-compare__badge {
  display:    block;
  font-size:  .65rem;
  font-weight: 700;
  background: var(--tkb-primary);
  color:      #fff;
  border-radius: 3px;
  padding:    .15em .4em;
  margin-top: .25rem;
  text-transform: uppercase;
}
.tkb-compare__buy td { padding: .75rem 1rem; }
.tkb-compare__buy .tkb-btn { font-size: .8rem; padding: .55em 1em; }

/* ── Pros & Cons ─────────────────────── */
.tkb-pros-cons {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           1rem;
  margin:        1.5rem 0;
}
@media (max-width: 600px) { .tkb-pros-cons { grid-template-columns: 1fr; } }

.tkb-pros, .tkb-cons {
  border-radius: 10px;
  padding:       1rem;
  border:        1.5px solid;
}
.tkb-pros { background: #f0fdf4; border-color: #86efac; }
.tkb-cons { background: #fef2f2; border-color: #fca5a5; }

.tkb-pros-cons__title {
  margin:      0 0 .75rem;
  font-size:   .9rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         .4em;
}
.tkb-pros-cons__title--pro { color: #15803d; }
.tkb-pros-cons__title--con { color: #b91c1c; }
.tkb-pros-cons__title--pro::before { content: "✓"; }
.tkb-pros-cons__title--con::before { content: "✗"; }

.tkb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.tkb-list__item {
  font-size:  .9rem;
  padding:    .3rem 0 .3rem .1rem;
  line-height: 1.4;
}
.tkb-list--pro .tkb-list__item::before { content: "✓ "; color: #16a34a; font-weight: 700; }
.tkb-list--con .tkb-list__item::before { content: "✗ "; color: #dc2626; font-weight: 700; }

/* ── Table of Contents ───────────────── */
.tkb-toc {
  background:    var(--tkb-surface);
  border:        1.5px solid var(--tkb-border);
  border-radius: 10px;
  padding:       0;
  margin:        1.5rem 0;
  overflow:      hidden;
}
.tkb-toc__header {
  width:       100%;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     .85rem 1.1rem;
  background:  transparent;
  border:      none;
  cursor:      pointer;
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--tkb-text);
  gap:         .5rem;
}
.tkb-toc__chevron { transition: transform .2s; flex-shrink: 0; }
.tkb-toc[data-collapsed="1"] .tkb-toc__chevron { transform: rotate(-90deg); }
.tkb-toc[data-collapsed="1"] .tkb-toc__list  { display: none; }

.tkb-toc__list {
  list-style: none;
  margin:     0;
  padding:    .25rem 1rem .85rem;
  display:    flex;
  flex-direction: column;
  gap:        .2rem;
  border-top: 1px solid var(--tkb-border);
}
.tkb-toc__item a {
  display:     block;
  padding:     .25rem .4rem;
  color:       var(--tkb-text);
  text-decoration: none;
  font-size:   .875rem;
  border-radius: 5px;
  transition:  background .12s, color .12s;
}
.tkb-toc__item a:hover { background: #fff; color: var(--tkb-primary); }
.tkb-toc__item--h3 a { color: var(--tkb-muted); font-size: .83rem; }

/* ── Inline Notice ───────────────────── */
/* ── Inline Notice — yeni yapı ────────── */
.tkb-notice {
  border-radius: 8px;
  overflow:      hidden;
  margin:        1.25rem 0;
  border:        1px solid;
}

/* Renk temaları: başlık çubuğu + gövde zemin + kenarlık */
.tkb-notice--info    { border-color: #3b82f6; }
.tkb-notice--warning { border-color: #f59e0b; }
.tkb-notice--success { border-color: #22c55e; }
.tkb-notice--tip     { border-color: #a855f7; }

/* Üst başlık çubuğu */
.tkb-notice__header {
  display:     flex;
  align-items: center;
  gap:         .55rem;
  padding:     .6rem 1rem;
  font-size:   .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:       #fff;
}
.tkb-notice--info    .tkb-notice__header { background: #3b82f6; }
.tkb-notice--warning .tkb-notice__header { background: #f59e0b; }
.tkb-notice--success .tkb-notice__header { background: #22c55e; }
.tkb-notice--tip     .tkb-notice__header { background: #a855f7; }

.tkb-notice__header svg {
  flex-shrink: 0;
  width:       16px;
  height:      16px;
}

/* Gövde */
.tkb-notice__body {
  padding:     .85rem 1rem;
  background:  #fff;
  font-size:   var(--tkb-notice-size, .9rem);
  line-height: 1.6;
  font-style:  italic;
  color:       #374151;
}

/* ── Responsive ──────────────────────── */
@media (max-width: 680px) {
  .tkb-product { flex-direction: column; }
  .tkb-product__image img { width: 100%; height: 200px; }
  .tkb-product__body { padding: .75rem; }
}

/* ── Affiliate Disclosure ────────────── */
.tkb-disclosure {
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  margin-top:    2.5rem;
  padding:       .85rem 1rem;
  background:    var(--tkb-surface);
  border:        1.5px solid var(--tkb-border);
  border-radius: var(--tkb-radius);
  font-size:     .8rem;
  color:         var(--tkb-muted);
  line-height:   1.55;
}
.tkb-disclosure__icon {
  flex-shrink: 0;
  margin-top:  .1em;
  opacity:     .6;
}
.tkb-disclosure p {
  margin: 0;
}

/* ── Buton Boyutları ─────────────────── */
.tkb-btn--xs { padding:.3em .65em;  font-size:.75rem; }
.tkb-btn--s  { padding:.5em .95em;  font-size:.82rem; }
.tkb-btn--m  { padding:.65em 1.25em; font-size:.9rem; }
.tkb-btn--l  { padding:.8em 1.55em; font-size:1rem;   }
.tkb-btn--xl { padding:1em 2em;     font-size:1.1rem; }

/* ── Buton Hizalama ──────────────────── */
.tkb-btn-wrap               { display:flex; }
.tkb-btn-wrap--left         { justify-content:flex-start; }
.tkb-btn-wrap--center       { justify-content:center; }
.tkb-btn-wrap--right        { justify-content:flex-end; }
.tkb-btn-wrap--full         { display:block; }
.tkb-btn-wrap--full .tkb-btn{ display:flex; width:100%; justify-content:center; }