/* ═══════════════════════════════════════════════════════════════════
     FORM · BİÇİM · scope: .t52-form
     01.09.2026 · Bu kurallar _capraz.blade.php'de `.hm-capraz` kapsamında
     duruyordu. İşaretleme buraya taşındığında CSS geride kaldı: form başka
     bir bölümde çağrıldığında alanların kenarlığı, yüksekliği ve ızgarası
     yoktu — etiketler ve girdiler üst üste biniyordu. Hata ekranda görülür
     ama konsola düşmez; ölçüm değil EKRAN GÖRÜNTÜSÜ yakaladı.
     Kural: parçayı taşıyan, betiğini VE biçimini de taşır.

     TEK BASIM ZORUNLU: aynı sayfada iki form var (_capraz 'cp', _kapanis
     'kp'). Yığına ekleme kapsayıcısı her çağrıda çalışır; aşağıdaki
     tek-basım sarmalayıcısı olmasaydı aynı stil bloğu iki kez basılırdı.
     Betik bilerek sarmalanmadı — her formun kendi $fk'siyle kapsamlanmış
     AYRI bir kopyası olmalı.

     ⚠️ BU YORUMDA DİREKTİF ADI BAŞINDA @ İLE YAZILMAZ. Blade yorumun içini
     de derler; bir <style> bloğundaki CSS yorumu da buna dahil. İlk yazımda
     burada @ ile üç direktif adı geçiyordu ve derleyici onları gerçek
     direktif sandı: sayfa 500 verdi ve hata laravel.log'a DÜŞMEDİ. Aynı
     tuzağın <script> sürümü daha önce yaşandı — kapsam yalnız JS değil,
     Blade'in derlediği HER YER.

     NÖTR: hiçbir renk sabitlenmez, hepsi token'dan gelir → açık/koyu tema
     ve hangi yüzeyin üstüne konursa konsun çalışır.
     TEK AYAR NOKTASI: --form-alan-bg. Alanların zemini varsayılan --surface;
     formu --surface bir bölüme koyarsan alanlar zemine karışır, o zaman
     barındıran bölüm bu değişkeni ezer (bkz. _kapanis).
     ═══════════════════════════════════════════════════════════════════ */
  
  .t52-form{display:grid;grid-template-columns:1fr 1fr;
    gap:var(--bo-4) var(--bo-5);align-items:start;max-width:860px}
  .t52-form .genis,
  .t52-form .gonder{grid-column:1 / -1}
  .t52-form .alan{display:block;min-width:0}
  .t52-form .et{display:block;margin-bottom:var(--bo-2);
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    font-weight:600;color:var(--muted)}
  .t52-form .et .ops{font-style:normal;text-transform:none;letter-spacing:.02em;
    color:var(--aksan-metin)}
  .t52-form input,.t52-form select,.t52-form textarea{
    width:100%;box-sizing:border-box;height:var(--btn-l,50px);padding:0 var(--bo-4);
    border:1px solid var(--line);border-radius:var(--bo-3);
    background:var(--form-alan-bg, var(--surface));color:var(--fg);
    font:450 14.5px/1.4 var(--sans);
    transition:background-color .22s ease,border-color .22s ease}
  .t52-form textarea{height:auto;padding:var(--bo-3) var(--bo-4);resize:vertical}
  .t52-form input:hover,.t52-form select:hover,.t52-form textarea:hover{border-color:var(--line-strong)}
  .t52-form input:focus,.t52-form select:focus,.t52-form textarea:focus{
    outline:none;border-color:var(--aksan-2)}
  .t52-form select{appearance:none;-webkit-appearance:none;cursor:pointer}
  

  .t52-form label.alan > select{padding-right:calc(var(--bo-4) + 22px);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2362666c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right var(--bo-4) center;background-size:12px 8px}
  html.dark .t52-form label.alan > select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b4b8bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

  

  .t52-form .tel-kutu{display:flex;align-items:stretch;overflow:hidden;box-sizing:border-box;height:var(--btn-l,50px);
    border:1px solid var(--line);border-radius:var(--bo-3);background:var(--form-alan-bg, var(--surface));
    transition:background-color .22s ease,border-color .22s ease}
  .t52-form .tel-kutu input{height:100%}
  .t52-form .tel-kutu:hover{border-color:var(--line-strong)}
  .t52-form .tel-kutu:focus-within{border-color:var(--aksan-2)}
  /* ÜLKE KODU · kutuda yalnız kod görünür (ör. «+90»), genişlik koda göre; şeffaf select üstte,
     tıklanınca ülke adlarıyla yerel liste açılır (09.10.2026). */
  .t52-form .tel-kutu .ulke-sec{position:relative;flex:none;display:flex;border-right:1px solid var(--line)}
  .t52-form .tel-kutu .ulke-kod{display:flex;align-items:center;gap:6px;padding:0 12px 0 var(--bo-4);
    font:500 14.5px/1 var(--sans);color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
  .t52-form .tel-kutu .ulke-kod::after{content:"";width:6px;height:6px;margin-top:-3px;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
  .t52-form .tel-kutu select{position:absolute;inset:0;width:100%;height:100%;max-width:none;
    opacity:0;border:0;border-radius:0;padding:0;cursor:pointer;font-size:16px}
  .t52-form .tel-kutu .ulke-sec:hover .ulke-kod{color:var(--aksan-2)}
  .t52-form .tel-kutu .ulke-sec:focus-within{box-shadow:inset 0 0 0 2px var(--aksan-2)}
  .t52-form .tel-kutu input{border:0;border-radius:0;background:transparent;flex:1 1 auto;min-width:0}

  .t52-form .hata{display:block;font-style:normal;margin-top:6px;
    font-size:12px;line-height:1.4;color:#c0392b}
  html.dark .t52-form .hata{color:#ffb4a8}
  .t52-form .hata[hidden]{display:none}
  .t52-form .yanlis input,.t52-form .yanlis .tel-kutu{border-color:#c0392b}
  html.dark .t52-form .yanlis input,
  html.dark .t52-form .yanlis .tel-kutu{border-color:#ffb4a8}

  /* Gönder · hero'daki büyük buton ile aynı ölçek: 52px · 15px · 0 32px (18.09.2026) */
  .t52-form .gonder{justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:var(--bo-2);
    height:var(--btn-l,52px);padding:0 var(--bo-6);
    background:var(--randevu);color:var(--randevu-fg);border:1px solid transparent;   /* 12.10 · RealSelf mavisi (--randevu) */
    border-radius:999px;cursor:pointer;
    font:600 15px/1 var(--sans);letter-spacing:.02em;
    transition:background-color .22s ease}
  .t52-form .gonder:hover{background:var(--randevu-hover)}
  .t52-form .gonder[disabled]{opacity:.7;cursor:progress}
  /* gönderim sonucu (06.10.2026) */
  .t52-form .durum{grid-column:1 / -1;padding:12px 16px;border-radius:12px;font-size:var(--yazi-m);line-height:1.5;border:1px solid var(--line)}
  .t52-form .durum.ok{background:color-mix(in srgb, #1fa855 12%, transparent);border-color:color-mix(in srgb, #1fa855 40%, transparent);color:var(--fg)}
  .t52-form .durum.err{background:color-mix(in srgb, #d9363e 10%, transparent);border-color:color-mix(in srgb, #d9363e 40%, transparent);color:var(--fg)}
  .t52-form .gonder:focus-visible{outline:2px solid var(--aksan-2);outline-offset:2px}
  /* KVKK / GDPR onay kutusu (12.10.2026) · tam satır; hata durumunda yalnız yazı rengi değişir */
  .t52-form .onay{grid-column:1 / -1;display:flex;gap:12px;align-items:center;cursor:pointer;
    font-size:var(--yazi-s);line-height:1.55;color:var(--muted)}
  .t52-form .onay input{width:18px;height:18px;flex:none;margin:0;padding:0;accent-color:var(--aksan-2)}   /* 12.10 · kutu yazıyla dikeyde ortalı */
  .t52-form .onay.yanlis span{color:#d9363e}
  .t52-form .onay-hata{grid-column:1 / -1;margin-top:calc(var(--bo-3) * -1)}

  @media(max-width:900px){
    .t52-form{grid-template-columns:1fr}
    .t52-form .gonder{justify-self:stretch}   /* dar ekranda öteki büyük butonlar gibi tam genişlik */
  }