/* =============================================================================
     UTEIRA ÖN BAŞVURU FORMU — KOMPAKT FİNAL v2
     Tüm modern telefonlarda scroll'suz tek ekran hedefi.
     ============================================================================= */


  /* === CSS DEĞİŞKENLERİ === */
  .uteira-ob-container {
        --ub-mavi-koyu: #2563B0;
        --ub-cyan: #5BCFD9;
        --ub-gradient: linear-gradient(135deg, #5BCFD9 0%, #2563B0 100%);
        --ub-bg: #F7FAFC;
        --ub-card: #FFFFFF;
        --ub-text: #1A2B4A;
        --ub-text-soft: #6B7B95;
        --ub-border: #E2E8F0;
        --ub-border-hover: #CBD5E1;
        --ub-error: #EF4444;
        --ub-error-bg: #FEF2F2;
        --ub-success: #10B981;
        --ub-success-bg: #F0FDF4;
        --ub-shadow: 0 8px 30px -8px rgba(37, 99, 176, 0.15);
        --ub-radius: 8px;
        --ub-radius-lg: 14px;
        --ub-transition: all 0.2s ease;
  }


  /* === RESET === */
  .uteira-ob-container,
  .uteira-ob-container * {
        box-sizing: border-box;
  }


  /* === ANA KONTAİNER === */
  .uteira-ob-container {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 4px;
        background: var(--ub-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: var(--ub-text);
        line-height: 1.4;
  }


  /* === FORM KARTI === */
  .uteira-ob-card {
        width: 100%;
        max-width: 460px;
        background: var(--ub-card);
        border-radius: var(--ub-radius-lg);
        box-shadow: var(--ub-shadow);
        overflow: hidden;
        animation: uteiraObFadeIn 0.4s ease;
  }

  @keyframes uteiraObFadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
  }


  /* === KART HEADER (DAHA DA KOMPAKT) === */
  .uteira-ob-header {
        padding: 4px 16px 6px;                                                       /* Üst boşluk minimum */
        text-align: center;
        background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 100%);
        border-bottom: 1px solid var(--ub-border);
  }

  .uteira-ob-logo {
        display: block;                                                              /* inline-block alt boşluğunu önle */
        width: 36px;
        height: 36px;
        margin: 0 auto;                                                              /* Yatay ortala, dikey margin sıfır */
  }

  .uteira-ob-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
  }

  .uteira-ob-title {
        font-size: 14px;
        font-weight: 700;
        margin: 2px 0 0;
        color: var(--ub-text);
        letter-spacing: -0.01em;
        line-height: 1.2;
  }

  .uteira-ob-subtitle {
        display: none;
  }


  /* === FORM GÖVDESİ (PADDING SIKI) === */
  .uteira-ob-form {
        padding: 10px 16px 12px;
  }


  /* === HONEYPOT === */
  .uteira-ob-honeypot {
        position: absolute;
        left: -9999px;
        top: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
        visibility: hidden;
  }


  /* === FIELD (ARALIKLAR DARALDI) === */
  .uteira-ob-field {
        margin-bottom: 6px;
  }

  .uteira-ob-field:last-of-type {
        margin-bottom: 0;
  }


  /* === LABEL === */
  .uteira-ob-label {
        display: block;
        margin-bottom: 3px;
        font-size: 11px;
        font-weight: 600;
        color: var(--ub-text);
        line-height: 1.3;
  }

  .uteira-ob-required {
        color: var(--ub-error);
        margin-left: 2px;
  }


  /* === INPUT (PADDING DARALDI) === */
  .uteira-ob-input {
        width: 100%;
        padding: 7px 11px;
        font-size: 16px;                                                             /* iOS Safari zoom önleme */
        font-family: inherit;
        color: var(--ub-text);
        background: var(--ub-card);
        border: 1.5px solid var(--ub-border);
        border-radius: var(--ub-radius);
        transition: var(--ub-transition);
        outline: none;
        -webkit-appearance: none;
        line-height: 1.25;
  }

  .uteira-ob-input::placeholder {
        color: #A0AEC0;
        font-size: 13px;
  }

  .uteira-ob-input:hover {
        border-color: var(--ub-border-hover);
  }

  .uteira-ob-input:focus {
        border-color: var(--ub-cyan);
        box-shadow: 0 0 0 3px rgba(91, 207, 217, 0.15);
  }


  /* === RADIO GROUP === */
  .uteira-ob-radio-group {
        display: flex;
        gap: 6px;
  }

  .uteira-ob-radio-option {
        flex: 1;
        position: relative;
        cursor: pointer;
  }

  .uteira-ob-radio-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
  }

  .uteira-ob-radio-label {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 10px;
        background: var(--ub-card);
        border: 1.5px solid var(--ub-border);
        border-radius: var(--ub-radius);
        font-size: 13px;
        font-weight: 500;
        color: var(--ub-text);
        cursor: pointer;
        transition: var(--ub-transition);
        text-align: center;
  }

  .uteira-ob-radio-option:hover .uteira-ob-radio-label {
        border-color: var(--ub-border-hover);
  }

  .uteira-ob-radio-option input[type="radio"]:checked + .uteira-ob-radio-label {
        border-color: var(--ub-mavi-koyu);
        background: linear-gradient(135deg, rgba(91, 207, 217, 0.08), rgba(37, 99, 176, 0.08));
        color: var(--ub-mavi-koyu);
  }


  /* === KVKK ACCORDION === */
  .uteira-ob-kvkk {
        margin-bottom: 6px;
        border: 1px solid var(--ub-border);
        border-radius: var(--ub-radius);
        overflow: hidden;
  }

  .uteira-ob-kvkk-summary {
        padding: 6px 12px;
        background: #F8FAFC;
        cursor: pointer;
        font-size: 11px;
        font-weight: 500;
        color: var(--ub-mavi-koyu);
        list-style: none;
        user-select: none;
        transition: var(--ub-transition);
  }

  .uteira-ob-kvkk-summary::-webkit-details-marker {
        display: none;
  }

  .uteira-ob-kvkk-summary:hover {
        background: #EFF6FF;
  }

  .uteira-ob-kvkk-summary::after {
        content: '+';
        float: right;
        font-size: 14px;
        line-height: 1;
  }

  .uteira-ob-kvkk[open] .uteira-ob-kvkk-summary::after {
        content: '−';
  }

  .uteira-ob-kvkk-text {
        padding: 10px;
        font-size: 11px;
        line-height: 1.45;
        color: var(--ub-text-soft);
        background: var(--ub-card);
        border-top: 1px solid var(--ub-border);
        max-height: 160px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
  }


  /* === CHECKBOX === */
  .uteira-ob-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        cursor: pointer;
  }

  .uteira-ob-checkbox input[type="checkbox"] {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin: 1px 0 0;
        cursor: pointer;
        accent-color: var(--ub-mavi-koyu);
  }

  .uteira-ob-checkbox-text {
        font-size: 11px;
        color: var(--ub-text);
        line-height: 1.4;
  }


  /* === SUBMIT BUTON === */
  .uteira-ob-submit {
        width: 100%;
        padding: 9px 18px;
        margin-top: 2px;
        font-size: 14px;
        font-weight: 700;
        font-family: inherit;
        color: #FFFFFF;
        background: var(--ub-gradient);
        border: none;
        border-radius: var(--ub-radius);
        cursor: pointer;
        transition: var(--ub-transition);
        box-shadow: 0 3px 10px rgba(37, 99, 176, 0.25);
        letter-spacing: 0.01em;
  }

  .uteira-ob-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(37, 99, 176, 0.35);
  }

  .uteira-ob-submit:active {
        transform: translateY(0);
  }

  .uteira-ob-submit:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
  }


  /* === HATA / BAŞARI MESAJLARI === */
  .uteira-ob-message {
        margin-bottom: 6px;
        padding: 7px 10px;
        border-radius: var(--ub-radius);
        font-size: 11px;
        line-height: 1.4;
        display: none;
  }

  .uteira-ob-message.is-visible {
        display: block;
  }

  .uteira-ob-message--error {
        background: var(--ub-error-bg);
        color: var(--ub-error);
        border: 1px solid #FECACA;
  }

  .uteira-ob-message--success {
        background: var(--ub-success-bg);
        color: var(--ub-success);
        border: 1px solid #BBF7D0;
  }


  /* === KAPALI DURUM === */
  .uteira-ob-closed {
        text-align: center;
        padding: 28px 20px;
  }

  .uteira-ob-closed-icon {
        font-size: 36px;
        margin-bottom: 8px;
  }

  .uteira-ob-closed-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 6px;
        color: var(--ub-text);
  }

  .uteira-ob-closed-text {
        font-size: 13px;
        color: var(--ub-text-soft);
        margin: 0;
        line-height: 1.5;
  }


  /* =============================================================================
     RESPONSIVE — Tablet ve üzeri için biraz nefes
     ============================================================================= */

  @media (min-width: 768px) {
        .uteira-ob-container {
                padding: 16px;
        }

        .uteira-ob-card {
                max-width: 500px;
        }

        .uteira-ob-header {
                padding: 12px 24px 10px;
        }

        .uteira-ob-logo {
                width: 52px;
                height: 52px;
        }

        .uteira-ob-title {
                font-size: 17px;
                margin-top: 4px;
        }

        .uteira-ob-form {
                padding: 16px 24px 20px;
        }

        .uteira-ob-field {
                margin-bottom: 11px;
        }

        .uteira-ob-label {
                font-size: 13px;
        }

        .uteira-ob-input {
                padding: 9px 13px;
        }

        .uteira-ob-input::placeholder {
                font-size: 14px;
        }

        .uteira-ob-radio-label {
                padding: 9px 12px;
                font-size: 14px;
        }

        .uteira-ob-checkbox-text,
        .uteira-ob-kvkk-text,
        .uteira-ob-kvkk-summary {
                font-size: 13px;
        }

        .uteira-ob-kvkk-text {
                max-height: 200px;
        }

        .uteira-ob-submit {
                padding: 12px 20px;
                font-size: 15px;
        }
  }


  /* === HAREKET DUYARLILIĞI === */
  @media (prefers-reduced-motion: reduce) {
        .uteira-ob-card {
                animation: none;
        }

        .uteira-ob-input,
        .uteira-ob-radio-label,
        .uteira-ob-submit {
                transition: none;
        }
  }