/* ==========================================================================
   Webboll Forms — Frontend
   Scope'lu CSS değişkenleri her form sarmalayıcısında ayrı ayrı tanımlanır.
   ========================================================================== */

.wbf-form-wrap {
    --wbf-primary: #4f46e5;
    --wbf-bg: #ffffff;
    --wbf-field-bg: #f8fafc;
    --wbf-text: #0f172a;
    --wbf-label: #334155;
    --wbf-border: #e2e8f0;
    --wbf-radius: 10px;
    --wbf-fs: 15px;
    --wbf-btn-text: #ffffff;
    --wbf-error: #dc2626;
    --wbf-success: #16a34a;

    /* Boşluk değişkenleri (builder'dan ayarlanır) */
    --wbf-form-pad: 28px;
    --wbf-field-gap: 18px;
    --wbf-field-pad-y: 12px;
    --wbf-field-pad-x: 14px;
    --wbf-border-w: 1px;
    --wbf-label-gap: 6px;

    /* Başlık değişkenleri */
    --wbf-title-color: #0f172a;
    --wbf-title-bg: transparent;
    --wbf-title-align: left;
    --wbf-title-size: 22px;
    --wbf-title-weight: 700;
    --wbf-title-pad: 0;
    --wbf-title-radius: 10px;

    margin: 0 auto;
    padding: var(--wbf-form-pad);
    background: var(--wbf-bg);
    color: var(--wbf-text);
    font-size: var(--wbf-fs);
    line-height: 1.5;
    box-sizing: border-box;
    border-radius: var(--wbf-radius);
    width: 100%;
}
.wbf-form-wrap *,
.wbf-form-wrap *::before,
.wbf-form-wrap *::after { box-sizing: inherit; }

.wbf-form { display: block; }

/* ---------- Başlık bloğu (kicker + ana başlık + çizgi + alt başlık + açıklama) ---------- */
.wbf-header {
    margin: 0 0 calc(var(--wbf-field-gap) + 4px);
    padding: var(--wbf-title-pad);
    background: var(--wbf-title-bg);
    text-align: var(--wbf-title-align);
    border-radius: var(--wbf-title-radius);
}
.wbf-header > * { margin: 0; }
.wbf-header > * + * { margin-top: 10px; }

.wbf-header-kicker {
    font-size: var(--wbf-kicker-size);
    color: var(--wbf-kicker-color);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
}
.wbf-header-main {
    font-size: var(--wbf-main-size);
    color: var(--wbf-main-color);
    font-weight: var(--wbf-title-weight);
    line-height: 1.2;
    word-wrap: break-word;
}
.wbf-header-sub {
    font-size: var(--wbf-sub-size);
    color: var(--wbf-sub-color);
    font-weight: 500;
    line-height: 1.35;
}
.wbf-header-desc {
    font-size: var(--wbf-desc-size);
    color: var(--wbf-desc-color);
    line-height: 1.5;
}
/* Çizgi: kendi bağımsız hizalamasına göre konumlanır */
.wbf-header-line {
    display: block;
    width: var(--wbf-line-width);
    height: 3px;
    border-radius: 3px;
    background: var(--wbf-line-color);
    margin: 14px 0 4px;
}
.wbf-header-line[data-line-align="left"]   { margin-left: 0;    margin-right: auto; }
.wbf-header-line[data-line-align="center"] { margin-left: auto; margin-right: auto; }
.wbf-header-line[data-line-align="right"]  { margin-left: auto; margin-right: 0; }

/* ---------- Yerleşim: satır / sütun / iç içe ---------- */
.wbf-fields { display: flex; flex-direction: column; gap: var(--wbf-field-gap); }

.wbf-row { display: flex; width: 100%; gap: var(--wbf-field-gap); }
.wbf-row-horizontal { flex-direction: row; flex-wrap: wrap; }
.wbf-row-vertical { flex-direction: column; }
.wbf-col { display: flex; flex-direction: column; gap: var(--wbf-field-gap); min-width: 0; }

/* ---------- Alanlar ---------- */
.wbf-field { display: flex; flex-direction: column; gap: var(--wbf-label-gap); min-width: 0; }

.wbf-label {
    font-weight: 600;
    color: var(--wbf-label);
    font-size: calc(var(--wbf-fs) - 1px);
    line-height: 1.35;
}
.wbf-req { color: var(--wbf-error); }

.wbf-input {
    width: 100%;
    max-width: 100%;
    padding: var(--wbf-field-pad-y) var(--wbf-field-pad-x);
    font-size: var(--wbf-fs);
    font-family: inherit;
    color: var(--wbf-text);
    background: var(--wbf-field-bg);
    border: var(--wbf-border-w) solid var(--wbf-border);
    border-radius: var(--wbf-radius);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    appearance: none;
}
.wbf-input::placeholder { color: #94a3b8; }
.wbf-input:hover { border-color: #cbd5e1; }
.wbf-input:focus {
    outline: none;
    border-color: var(--wbf-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbf-primary) 18%, transparent);
}
.wbf-textarea { resize: vertical; min-height: 96px; }

.wbf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}
.wbf-select[multiple] { background-image: none; padding-right: 13px; min-height: 120px; }

.wbf-help { color: #94a3b8; font-size: calc(var(--wbf-fs) - 3px); line-height: 1.35; }

/* ---------- Seçim grupları ---------- */
.wbf-choice-group { display: flex; flex-direction: column; gap: 9px; }
.wbf-choice {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: var(--wbf-field-bg);
    border: 1.5px solid var(--wbf-border);
    border-radius: var(--wbf-radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.wbf-choice:hover { border-color: #cbd5e1; }
.wbf-choice input { accent-color: var(--wbf-primary); width: 17px; height: 17px; margin: 0; }
.wbf-choice:has(input:checked) {
    border-color: var(--wbf-primary);
    background: color-mix(in srgb, var(--wbf-primary) 8%, var(--wbf-field-bg));
}

/* ---------- Yükleme alanı ---------- */
.wbf-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 26px 16px; text-align: center;
    border: 2px dashed var(--wbf-border);
    border-radius: var(--wbf-radius);
    background: var(--wbf-field-bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.wbf-dropzone:hover, .wbf-dropzone.is-drag {
    border-color: var(--wbf-primary);
    background: color-mix(in srgb, var(--wbf-primary) 6%, var(--wbf-field-bg));
}
.wbf-dropzone .wbf-file-input { display: none; }
.wbf-dropzone-icon { font-size: 22px; color: var(--wbf-primary); }
.wbf-dropzone-text { color: #64748b; font-size: calc(var(--wbf-fs) - 1px); }
.wbf-dropzone-file { font-weight: 600; color: var(--wbf-text); font-size: calc(var(--wbf-fs) - 2px); }
.wbf-image-preview { max-width: 140px; max-height: 140px; border-radius: 8px; margin-top: 8px; }
.wbf-video-field { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Tablo / grid ---------- */
.wbf-table-field { overflow-x: auto; }
.wbf-grid { width: 100%; border-collapse: collapse; }
.wbf-grid th, .wbf-grid td { padding: 6px; text-align: left; }
.wbf-grid th {
    font-size: calc(var(--wbf-fs) - 2px); font-weight: 600;
    color: var(--wbf-label); border-bottom: 1.5px solid var(--wbf-border);
}
.wbf-grid-input { padding: 8px 10px; }
.wbf-grid-act { width: 38px; text-align: center; }
.wbf-table-del {
    width: 28px; height: 28px; border-radius: 7px; border: none;
    background: #fee2e2; color: var(--wbf-error); font-size: 18px; cursor: pointer; line-height: 1;
}
.wbf-table-del:hover { background: #fecaca; }
.wbf-table-add {
    margin-top: 10px; padding: 8px 14px; font-size: calc(var(--wbf-fs) - 1px);
    background: transparent; color: var(--wbf-primary);
    border: 1.5px dashed var(--wbf-primary); border-radius: var(--wbf-radius); cursor: pointer;
}
.wbf-table-add:hover { background: color-mix(in srgb, var(--wbf-primary) 8%, transparent); }

/* ---------- CAPTCHA ---------- */
.wbf-captcha { display: flex; align-items: center; gap: 12px; }
.wbf-captcha-q {
    font-weight: 700; font-size: calc(var(--wbf-fs) + 2px);
    padding: 10px 14px; background: var(--wbf-field-bg);
    border: 1.5px solid var(--wbf-border); border-radius: var(--wbf-radius);
    letter-spacing: 1px; white-space: nowrap;
}
.wbf-captcha-input { max-width: 130px; }

/* ---------- SMS doğrulama ---------- */
.wbf-sms-verify { display: flex; flex-direction: column; gap: 10px; }
.wbf-sms-row, .wbf-sms-code-row { display: flex; gap: 8px; }
.wbf-sms-row .wbf-input, .wbf-sms-code-row .wbf-input { flex: 1; }
.wbf-sms-send, .wbf-sms-confirm {
    padding: 0 18px; white-space: nowrap; border: none; cursor: pointer;
    background: var(--wbf-primary); color: var(--wbf-btn-text);
    border-radius: var(--wbf-radius); font-weight: 600; font-size: calc(var(--wbf-fs) - 1px);
    transition: filter .15s;
}
.wbf-sms-send:hover, .wbf-sms-confirm:hover { filter: brightness(1.08); }
.wbf-sms-send:disabled { opacity: .55; cursor: not-allowed; }
.wbf-sms-status { font-size: calc(var(--wbf-fs) - 2px); }
.wbf-sms-status.ok { color: var(--wbf-success); font-weight: 600; }
.wbf-sms-status.err { color: var(--wbf-error); }

/* ---------- Yapısal ---------- */
.wbf-section-heading { margin: 8px 0 0; color: var(--wbf-text); font-weight: 700; }
.wbf-divider { border: none; border-top: 1.5px solid var(--wbf-border); margin: 4px 0; }
.wbf-custom-html { color: var(--wbf-text); }

/* ---------- Hata durumu ---------- */
.wbf-field.has-error .wbf-input,
.wbf-field.has-error .wbf-dropzone { border-color: var(--wbf-error); }
.wbf-field-error { color: var(--wbf-error); font-size: calc(var(--wbf-fs) - 3px); min-height: 0; }
.wbf-field.has-error .wbf-field-error { min-height: 16px; }

/* ---------- Mesajlar ---------- */
.wbf-messages:empty { display: none; }
.wbf-messages {
    padding: 13px 16px; border-radius: var(--wbf-radius); margin-bottom: 18px;
    font-size: calc(var(--wbf-fs) - 1px); font-weight: 500;
}
.wbf-messages.ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.wbf-messages.err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ---------- Gönder butonu ---------- */
.wbf-actions { margin-top: 22px; display: flex; }
.wbf-actions-left   { justify-content: flex-start; }
.wbf-actions-center { justify-content: center; }
.wbf-actions-right  { justify-content: flex-end; }
.wbf-actions-full   { display: block; }
.wbf-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 30px; font-size: var(--wbf-fs); font-weight: 600; font-family: inherit;
    color: var(--wbf-btn-text); background: var(--wbf-primary);
    border: none; border-radius: var(--wbf-radius); cursor: pointer;
    transition: filter .15s, transform .05s;
}
.wbf-submit-full { display: flex; width: 100%; }
.wbf-submit:hover { filter: brightness(1.08); }
.wbf-submit:active { transform: translateY(1px); }
.wbf-submit:disabled { opacity: .6; cursor: not-allowed; }
.wbf-spinner {
    width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: var(--wbf-btn-text); border-radius: 50%;
    animation: wbf-spin .7s linear infinite;
}
@keyframes wbf-spin { to { transform: rotate(360deg); } }

/* ---------- Gönderim listesi (public) ---------- */
.wbf-entries-public { max-width: 860px; margin: 0 auto; }
.wbf-entries-search { display: flex; gap: 8px; margin-bottom: 18px; }
.wbf-entries-search input { flex: 1; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 10px; }
.wbf-entries-search button { padding: 0 20px; background: #4f46e5; color: #fff; border: none; border-radius: 10px; cursor: pointer; }
.wbf-entry-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.wbf-entry-head { display: flex; justify-content: space-between; color: #64748b; font-size: 13px; margin-bottom: 12px; }
.wbf-entry-list { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; }
.wbf-entry-list dt { font-weight: 600; color: #475569; }
.wbf-entry-list dd { margin: 0; color: #0f172a; word-break: break-word; }
.wbf-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.wbf-pagination a { padding: 7px 13px; border: 1px solid #e2e8f0; border-radius: 8px; text-decoration: none; color: #475569; }
.wbf-pagination a.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.wbf-notice { padding: 14px 18px; background: #f1f5f9; border-radius: 10px; color: #475569; }

/* ---------- Mobil ---------- */
/* ==========================================================================
   RESPONSIVE — Tam duyarlı yerleşim
   ========================================================================== */

/* Tablet ve altı: sütunları ikişerli/tek sıraya indir, padding'i azalt */
@media (max-width: 782px) {
    .wbf-form-wrap {
        padding: clamp(14px, calc(var(--wbf-form-pad) * 0.7), var(--wbf-form-pad));
    }
    /* 3+ sütunlu yatay satırlar iki sütuna düşer */
    .wbf-row-horizontal > .wbf-col {
        flex-basis: calc(50% - (var(--wbf-field-gap) / 2)) !important;
        max-width: 100% !important;
    }
}

/* Mobil: her şey tek sütun, dokunma hedefleri büyür */
@media (max-width: 640px) {
    .wbf-row-horizontal { flex-direction: column; gap: var(--wbf-field-gap); }
    .wbf-row-horizontal > .wbf-col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Başlık mobilde ölçeklenir ama okunur kalır */
    .wbf-header-main { font-size: clamp(20px, calc(var(--wbf-main-size) * 0.78), var(--wbf-main-size)); }

    /* Dokunma hedefleri: input ve butonlar parmak dostu yükseklikte */
    .wbf-input,
    .wbf-submit,
    .wbf-cascader-level,
    .wbf-calc-qty { min-height: 44px; }

    .wbf-choice { padding: 12px 14px; }

    /* Liste/tablo tabanlı alanlar taşmasın */
    .wbf-entry-list { grid-template-columns: 1fr; gap: 2px 0; }
    .wbf-entry-list dt { margin-top: 8px; }
    .wbf-sms-row, .wbf-sms-code-row { flex-direction: column; }
    .wbf-sms-row .wbf-input, .wbf-sms-code-row .wbf-input { width: 100%; }

    /* Hesaplama kalemleri dikey yığılır */
    .wbf-cascader { flex-direction: column; }
    .wbf-cascader .wbf-cascader-level { flex: 1 1 100%; width: 100%; }

    /* Field seviyesindeki inline genişlik kısıtları mobilde kalksın */
    .wbf-field[style] { max-width: 100% !important; }

    /* Tablo alanı yatay kaydırılabilir olsun (taşma engeli) */
    .wbf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Çok küçük ekranlar (dar telefonlar) */
@media (max-width: 380px) {
    .wbf-form-wrap { padding: 12px; }
    .wbf-header-main { font-size: clamp(18px, calc(var(--wbf-main-size) * 0.7), var(--wbf-main-size)); }
}

/* Görsel taşma güvenliği: hiçbir alan konteynerini aşmasın */
.wbf-form-wrap img,
.wbf-form-wrap table,
.wbf-form-wrap iframe { max-width: 100%; }
.wbf-table { width: 100%; }

/* ---------- Erişilebilirlik ---------- */
@media (prefers-reduced-motion: reduce) {
    .wbf-spinner { animation-duration: 1.4s; }
    .wbf-input, .wbf-choice, .wbf-dropzone, .wbf-submit { transition: none; }
}
.wbf-form-wrap :focus-visible { outline: 2px solid var(--wbf-primary); outline-offset: 2px; }

/* ==========================================================================
   Hesaplama & Hiyerarşik Liste Alanları
   ========================================================================== */

/* Hiyerarşik liste (cascader) */
.wbf-cascader { display: flex; flex-wrap: wrap; gap: 8px; }
.wbf-cascader .wbf-cascader-level { flex: 1 1 160px; min-width: 0; }
.wbf-cascader .wbf-cascader-level:disabled { opacity: .55; cursor: not-allowed; }

/* Fiyat kalemi */
.wbf-calc-item {
	background: var(--wbf-field-bg, #f8fafc);
	border: 1px solid var(--wbf-border, #e2e8f0);
	border-radius: var(--wbf-radius, 10px);
	padding: 12px 14px; margin: 6px 0;
	transition: opacity .2s, box-shadow .2s;
}
.wbf-calc-item.wbf-calc-off { opacity: .5; }
.wbf-calc-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; cursor: pointer; }
.wbf-calc-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wbf-calc-price-select { flex: 1 1 180px; }
.wbf-calc-qty { width: 110px; }
.wbf-calc-unit, .wbf-calc-unitprice { color: var(--wbf-label, #64748b); font-size: .9em; white-space: nowrap; }
.wbf-calc-subtotal {
	margin-left: auto; font-weight: 700; font-size: 1.05em;
	color: var(--wbf-primary, #4f46e5); white-space: nowrap;
	min-width: 110px; text-align: right;
}

/* Toplam tutar */
.wbf-calc-total {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--wbf-primary, #4f46e5);
	color: #fff; border-radius: var(--wbf-radius, 10px);
	padding: 14px 18px; margin: 10px 0;
}
.wbf-calc-total-label { font-weight: 600; font-size: 1.05em; opacity: .95; }
.wbf-calc-total-value { font-weight: 800; font-size: 1.4em; }

@media (max-width: 640px) {
	.wbf-calc-item-row { flex-direction: column; align-items: stretch; }
	.wbf-calc-qty { width: 100%; }
	.wbf-calc-subtotal { margin-left: 0; text-align: left; }
}