/* Domain Chip Component (2026-05-16)
 * TLD fiyat pill'i — yenileme (old, line-through) + kayıt (new, turuncu) + period + opsiyonel POPÜLER badge.
 * Variants:
 *   .domain-chip            — base (ana sayfa hero altı)
 *   .domain-chip--sm        — %20 daha küçük (domain alt sayfa hero'ları)
 *   .domain-chip--popular   — turuncu border + krem bg vurgu
 *
 * Markup:
 *   <a class="domain-chip [--sm] [--popular]">
 *     <span class="domain-chip__ext">.tld</span>
 *     <span class="domain-chip__old">$X</span>
 *     <span class="domain-chip__new">$Y</span>
 *     <span class="domain-chip__period">/yıl</span>
 *     <span class="domain-chip__badge">POPÜLER</span>   ← popular için
 *   </a>
 */

.domain-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #E5E9F0;
    border-radius: 14px;
    padding: 14px 20px;
    font-family: 'Inter', system-ui, sans-serif;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    cursor: pointer;
}
.domain-chip:hover {
    border-color: #F26B1A;
    box-shadow: 0 4px 14px rgba(242,107,26,.18);
    transform: translateY(-1px);
    text-decoration: none;
}

.domain-chip__ext {
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
    margin-right: 4px;
}

.domain-chip__old {
    font-size: 14px;
    font-weight: 500;
    color: #64748B;
    text-decoration: line-through;
    text-decoration-color: rgba(100,116,139,.55);
    text-decoration-thickness: 1.5px;
}

.domain-chip__new {
    font-size: 22px;
    font-weight: 800;
    color: #F26B1A;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.domain-chip__period {
    font-size: 12px;
    font-weight: 600;
    color: #8A93A7;
    margin-left: -2px;
}

.domain-chip--popular {
    border: 2px solid #F26B1A;
    background: #FFFAF4;
    box-shadow: 0 8px 20px -10px rgba(242,107,26,.4);
}

.domain-chip__badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #F26B1A;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: 6px;
}

/* --- --sm modifier (%20 daha küçük — domain alt sayfa hero'ları) --- */
.domain-chip--sm {
    gap: 8px;
    padding: 11px 16px;
    border-radius: 11px;
}
.domain-chip--sm .domain-chip__ext    { font-size: 14px; }
.domain-chip--sm .domain-chip__old    { font-size: 11px; }
.domain-chip--sm .domain-chip__new    { font-size: 18px; }
.domain-chip--sm .domain-chip__period { font-size: 10px; }
.domain-chip--sm .domain-chip__badge  { font-size: 8px; padding: 3px 8px; }