.trm-overlay {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.65);
    z-index: 99999;
    display: none;
    align-items: flex-start; justify-content: center;
    padding: 30px 15px;
    overflow-y: auto;
}
.trm-overlay.open { display: flex; }
body.trm-no-scroll { overflow: hidden; }
.trm-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.30);
    padding: 28px;
    border-top: 6px solid #c1000f;
    max-width: 720px; width: 100%;
    position: relative; margin: auto;
}
.trm-close {
    position: absolute; top: 10px; right: 14px;
    width: 34px; height: 34px;
    border: 0; background: #f3f4f6; color: #444;
    font-size: 20px; font-weight: 700; cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.trm-close:hover { background: #e5e7eb; color:#111; }

/* tr-* classes (sayfa stilinin aynisi) */
.tr-title { font-size: 22px; font-weight: 800; color: #c1000f; margin: 0 0 4px; text-transform: uppercase; }
.tr-date { font-size: 14px; color: #666; margin-bottom: 18px; }
.tr-steps { display: flex; gap: 8px; margin-bottom: 22px; }
.tr-step { flex: 1; height: 5px; border-radius: 3px; background: #e6e8ec; transition: background .3s; }
.tr-step.is-done   { background: #16862f; }
.tr-step.is-active { background: #c1000f; }
.tr-section { display: none; }
.tr-section.is-active { display: block; }
.tr-rules-box {
    background: #fafbfc; border: 1px solid #e6e8ec; border-radius: 10px;
    padding: 14px 16px; max-height: 320px; overflow-y: auto;
    margin-bottom: 16px; font-size: 14px; line-height: 1.55; color: #2c2c2c;
}
.tr-rules-box img { max-width: 100%; height: auto; }
.tr-accept {
    display: flex; align-items: center; gap: 10px;
    background: #fff7d6; border: 1px solid #f0d97e;
    padding: 12px 14px; border-radius: 8px; margin-bottom: 18px;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.tr-accept input { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.tr-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 8px; }
.tr-actions .left, .tr-actions .right { display: flex; gap: 10px; }
.tr-btn { padding: 11px 22px; border: 0; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .1s, opacity .2s; }
.tr-btn-primary { background: #16a34a; color: #fff; }
.tr-btn-primary:hover { background: #15803d; }
.tr-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.tr-btn-ghost { background: #dc2626; color: #fff; }
.tr-btn-ghost:hover { background: #b91c1c; }
.tr-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-form .row.full { grid-template-columns: 1fr; }
.tr-form .form-group { margin-bottom: 14px; }
.tr-form label { display: block; font-size: 12px; font-weight: 700; color: #444; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.tr-form input, .tr-form select {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #d1d5db; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: #2c2c2c; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.tr-form input:focus, .tr-form select:focus { outline: none; border-color: #c1000f; box-shadow: 0 0 0 3px rgba(193,0,15,0.10); }
.tr-phone-wrap { display: flex; gap: 8px; }
.tr-phone-wrap input { flex: 1; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 16px; font-weight: 600; }
.tr-cc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border: 1.5px solid #d1d5db; border-radius: 8px; font-weight: 700; font-size: 15px; color: #444; user-select: none; cursor: pointer; }
.tr-flag { width: 22px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.tr-flag svg { width: 22px; height: 16px; display: block; }
.tr-cc-code { color: #c1000f; }
.tr-cc-wrap { position: relative; }
.tr-cc-arrow { font-size: 11px; color: #888; margin-left: 2px; }
.tr-cc-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); max-height: 280px; overflow-y: auto; z-index: 100000; min-width: 240px; padding: 6px; }
.tr-cc-panel.open { display: block; }
.tr-cc-panel button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; border-radius: 6px; font-size: 14px; font-weight: 600; color: #2c2c2c; cursor: pointer; text-align: left; }
.tr-cc-panel button:hover { background: #f3f4f6; }
.tr-cc-panel button span { color: #c1000f; font-weight: 800; }
.tr-success { text-align: center; padding: 24px 12px; }
.tr-success .icon { width: 72px; height: 72px; border-radius: 50%; background: #d1fae5; color: #065f46; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.tr-success h2 { margin: 0 0 8px; color: #065f46; }
.tr-success p { margin: 0; color: #666; font-size: 15px; }
.tr-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 0 14px; display: none; }
.tr-error.is-visible { display: block; }
.tr-info-row { display: flex; gap: 16px; padding: 12px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: #1e40af; }
.tr-info-row i { color: #2563eb; font-size: 16px; }
.tr-note { font-size: 12px; color: #6b7280; margin-top: -6px; margin-bottom: 14px; }
@media (max-width: 540px) {
    .trm-overlay { padding: 14px 8px; }
    .trm-card { padding: 20px; }
    .tr-form .row { grid-template-columns: 1fr; }
}