/**
 * GokRail Form Styles
 * Kariyer ve Staj Başvuru Formları için
 * Version: 2.0.0
 */

:root {
  --kr-darkest: #0B0B28;
  --kr-mid: #011880;
  --kr-primary: #002DDE;
  --kr-hover:   #0022aa;
  --kr-bg-grad: linear-gradient(135deg, #0B0B28 0%, #011880 60%, #002DDE 100%);
  --kr-section-bg: #f4f6ff;
  --kr-border:  #c7d2fe;
  --kr-focus:   rgba(0,45,222,.15);
  --kr-text:    #0B0B28;
  --kr-radius:  10px;
}

/* Base Styles */
html, body {
  margin:0 !important; 
  padding:0 !important;
  min-height:100vh;
  background: var(--kr-bg-grad) !important;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif !important;
  color: var(--kr-text) !important;
}

/* Hide WordPress elements */
#wpadminbar { display:none !important; }
header.site-header,
#masthead,
footer.site-footer,
#colophon,
.site-header,
.site-footer,
.navbar,
nav.navbar,
#site-navigation,
.main-navigation,
#secondary,
.widget-area { 
  display:none !important; 
}

*,
*::before,
*::after { 
  box-sizing:border-box; 
}

/* Container */
.kr-wrapper {
  min-height:100vh; 
  display:flex; 
  flex-direction:column;
  align-items:center; 
  padding:40px 16px 60px;
}

.kr-card {
  width:100%; 
  max-width:920px;
  background:rgba(255,255,255,.98);
  border-radius:18px;
  box-shadow:0 28px 70px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.3);
  overflow:hidden;
}

/* Header */
.kr-header {
  background: var(--kr-bg-grad);
  padding:32px 40px 28px; 
  text-align:center;
}

.kr-header img { 
  height:60px; 
  margin-bottom:14px; 
  display:block; 
  margin-left:auto; 
  margin-right:auto; 
}

.kr-header h1 { 
  color:#fff; 
  font-size:1.6rem; 
  font-weight:700; 
  margin:0 0 6px; 
  letter-spacing:.4px; 
}

.kr-header p {  
  color:rgba(255,255,255,.75); 
  margin:0; 
  font-size:.9rem; 
}

/* Body */
.kr-body { 
  padding:36px 40px 44px; 
}

/* Section */
.kr-section {
  background:var(--kr-section-bg);
  border:1px solid var(--kr-border);
  border-left:4px solid var(--kr-primary);
  border-radius:var(--kr-radius);
  padding:22px 22px 18px;
  margin-bottom:22px;
}

.kr-section-title {
  font-size:.75rem; 
  font-weight:700; 
  text-transform:uppercase;
  letter-spacing:1.3px; 
  color:var(--kr-primary);
  margin:0 0 16px; 
  padding-bottom:8px;
  border-bottom:1px solid var(--kr-border);
}

/* Grid System */
.kr-grid-2 { 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:14px; 
}

.kr-grid-3 { 
  display:grid; 
  grid-template-columns:1fr 1fr 1fr; 
  gap:14px; 
}

.kr-grid-4 { 
  display:grid; 
  grid-template-columns:1fr 1fr 1fr 1fr; 
  gap:12px; 
}

.kr-col-full { 
  grid-column:1/-1; 
}

/* Form Group */
.kr-group { 
  display:flex; 
  flex-direction:column; 
}

.kr-group label {
  font-size:.75rem; 
  font-weight:600; 
  color:#4a5568;
  margin-bottom:5px; 
  text-transform:uppercase; 
  letter-spacing:.5px;
}

.kr-group label .req { 
  color:#e53e3e; 
  margin-left:2px; 
}

.kr-group input[type="text"],
.kr-group input[type="email"],
.kr-group input[type="tel"],
.kr-group input[type="number"],
.kr-group input[type="date"],
.kr-group select,
.kr-group textarea {
  border:1.5px solid var(--kr-border);
  border-radius:7px;
  padding:9px 12px;
  font-size:.9rem;
  color:var(--kr-text);
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
  width:100%;
  outline:none;
  font-family:inherit;
}

/* Tek satırlık tüm alanlar aynı yükseklikte (date/text/select farkını giderir) */
.kr-group input[type="text"],
.kr-group input[type="email"],
.kr-group input[type="tel"],
.kr-group input[type="number"],
.kr-group input[type="date"],
.kr-group select {
  height:42px !important;
  line-height:1.2 !important;
  box-sizing:border-box !important;
}

.kr-group input:focus,
.kr-group select:focus,
.kr-group textarea:focus {
  border-color:var(--kr-primary); 
  box-shadow:0 0 0 3px var(--kr-focus);
}

.kr-group textarea { 
  resize:vertical; 
  min-height:80px; 
}

/* Phone Prefix Row - DÜZELTİLMİŞ VERSİYON */
.kr-phone-row { 
  display:flex !important; 
  gap:6px; 
  align-items:center; 
  width:100%; 
}

.kr-phone-row select {
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:130px !important;
  font-size:.85rem !important;
  padding:9px 24px 9px 10px !important;
  border:1.5px solid var(--kr-border) !important;
  border-radius:7px !important;
  color:var(--kr-text) !important;

  /* Tek tip ok — tema okunu tamamen kaldır, sadece kendi okumuzu göster */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color:#fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23002DDE' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
}

.kr-phone-row input {
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  border:1.5px solid var(--kr-border) !important;
  border-radius:7px !important;
  padding:9px 12px !important;
  font-size:.9rem !important;
}

/* Dinamik kartlardaki (referans) telefon kutusu da statik telefonla
   aynı genişlikte olsun — .kr-dyn-card'ın width:100% kuralını ez */
.kr-dyn-card .kr-phone-row select {
  width:auto !important;
  max-width:120px !important;
}

/* Salary Prefix */
.kr-salary-wrap { 
  position:relative; 
}

.kr-salary-wrap .kr-salary-sym {
  position:absolute; 
  left:10px; 
  top:50%; 
  transform:translateY(-50%);
  color:#6b7280; 
  font-weight:600; 
  pointer-events:none;
}

.kr-salary-wrap input { 
  padding-left:26px !important; 
}

/* Radio Pills */
.kr-radio-group { 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
  margin-top:2px; 
}

.kr-radio-group label {
  display:flex; 
  align-items:center; 
  gap:6px;
  background:#fff; 
  border:1.5px solid var(--kr-border);
  border-radius:20px; 
  padding:7px 16px;
  cursor:pointer; 
  font-size:.86rem; 
  font-weight:500;
  text-transform:none; 
  letter-spacing:0; 
  color:#334155;
  transition:all .18s; 
  margin:0;
}

.kr-radio-group input[type="radio"] { 
  accent-color:var(--kr-primary); 
  width:14px; 
  height:14px; 
}

.kr-radio-group label:has(input:checked) {
  background:#e8eeff; 
  border-color:var(--kr-primary);
  color:var(--kr-darkest); 
  font-weight:700;
}

/* Conditional Sections */
.kr-cond {
  display:none; 
  margin-top:14px; 
  padding:16px;
  background:#eef2ff; 
  border:1px solid #c7d2fe;
  border-radius:8px; 
  animation:fadeIn .25s ease;
}

.kr-cond.active { 
  display:block; 
}

@keyframes fadeIn { 
  from{opacity:0;transform:translateY(-5px)} 
  to{opacity:1;transform:none} 
}

/* Education Section */
.edu-add-wrapper { 
  position:relative; 
  display:inline-block; 
}

.edu-add-btn {
  display:inline-flex !important; 
  align-items:center; 
  gap:6px;
  background:linear-gradient(135deg, var(--kr-mid), var(--kr-primary)) !important;
  color:#fff !important; 
  border:none !important;
  border-radius:20px !important; 
  padding:8px 18px; 
  font-size:.82rem;
  font-weight:600; 
  cursor:pointer; 
  transition:opacity .18s, transform .15s;
}

.edu-add-btn:hover { 
  opacity:.88; 
  transform:translateY(-1px); 
}

.edu-dropdown {
  display:none; 
  position:absolute; 
  top:calc(100% + 6px); 
  left:0;
  background:#fff; 
  border:1.5px solid var(--kr-border);
  border-radius:10px; 
  box-shadow:0 12px 32px rgba(0,0,0,.15);
  z-index:999; 
  min-width:200px; 
  overflow:hidden;
}

.edu-dropdown.open { 
  display:block; 
}

.edu-add-wrapper .edu-dropdown button {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  background:#fff !important;
  background-image:none !important;
  border:none !important;
  border-bottom:1px solid #eef2ff !important;
  border-radius:0 !important;
  text-align:left !important;
  padding:11px 16px !important;
  font-size:.88rem !important;
  font-weight:500 !important;
  font-family:inherit !important;
  letter-spacing:0 !important;
  color:var(--kr-text) !important;
  cursor:pointer !important;
  text-transform:none !important;
  box-shadow:none !important;
  transition:background .15s, color .15s;
}

.edu-add-wrapper .edu-dropdown button:last-child {
  border-bottom:none !important;
}

.edu-add-wrapper .edu-dropdown button:hover {
  background:var(--kr-section-bg) !important;
  background-image:none !important;
  color:var(--kr-primary) !important;
  transform:none !important;
}

.edu-add-wrapper .edu-dropdown button:disabled {
  color:#94a3b8 !important;
  background:#f8fafc !important;
  background-image:none !important;
  cursor:default !important;
}

.edu-add-wrapper .edu-dropdown button:disabled:hover {
  background:#f8fafc !important;
  color:#94a3b8 !important;
}

.edu-block { 
  display:none; 
  margin-top:12px; 
  padding:14px; 
  background:#eef2ff; 
  border:1px solid var(--kr-border); 
  border-radius:8px; 
  animation:fadeIn .2s ease; 
}

.edu-block.active { 
  display:block; 
}

.edu-block-header { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin-bottom:10px; 
}

.edu-block-header span { 
  font-weight:700; 
  font-size:.85rem; 
  color:var(--kr-primary); 
}

.edu-remove-btn {
  background:#fff !important; 
  border:1px solid #e2e8f0 !important; 
  border-radius:50% !important;
  color:#94a3b8 !important; 
  font-size:.85rem !important; 
  cursor:pointer !important;
  width:22px !important; 
  height:22px !important; 
  min-width:0 !important; 
  min-height:0 !important;
  max-width:22px !important; 
  padding:0 !important; 
  line-height:1 !important;
  display:inline-flex !important; 
  align-items:center !important; 
  justify-content:center !important;
  flex-shrink:0 !important; 
  box-shadow:none !important; 
  font-weight:400 !important; 
  text-transform:none !important;
}

.edu-remove-btn:hover { 
  background:#fee2e2 !important; 
  border-color:#fca5a5 !important; 
  color:#e53e3e !important; 
}

/* Dynamic Cards (lang/comp/exp/kurs/ref) */
.kr-dyn-card,
.dyn-card {
  background:#fff; 
  border:1px solid var(--kr-border);
  border-radius:8px; 
  padding:12px 14px 12px;
  margin-bottom:10px;
}

.kr-dyn-card-header,
.dyn-card-header {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  margin-bottom:10px;
}

.kr-dyn-card .dyn-num,
.dyn-card-num {
  font-size:.72rem; 
  font-weight:700; 
  color:var(--kr-primary); 
  text-transform:uppercase; 
  letter-spacing:.8px;
}

.kr-dyn-card .dyn-remove,
.dyn-remove {
  background:none; 
  border:1px solid #e2e8f0; 
  border-radius:50%;
  color:#94a3b8; 
  font-size:.8rem; 
  cursor:pointer; 
  line-height:1;
  width:20px; 
  height:20px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  transition:all .15s; 
  padding:0; 
  flex-shrink:0;
}

.kr-dyn-card .dyn-remove:hover,
.dyn-remove:hover { 
  background:#fee2e2; 
  border-color:#fca5a5; 
  color:#e53e3e; 
}

.kr-dyn-card .dyn-x,
.dyn-x {
  background:#fff !important; 
  border:1px solid #e2e8f0 !important; 
  border-radius:50% !important;
  color:#94a3b8 !important; 
  font-size:.85rem !important; 
  cursor:pointer !important;
  width:22px !important; 
  height:22px !important; 
  min-width:0 !important; 
  min-height:0 !important;
  max-width:22px !important; 
  padding:0 !important; 
  line-height:1 !important;
  display:inline-flex !important; 
  align-items:center !important; 
  justify-content:center !important;
  flex-shrink:0 !important; 
  box-shadow:none !important; 
  font-weight:400 !important; 
  text-transform:none !important;
}

.kr-dyn-card .dyn-x:hover,
.dyn-x:hover { 
  background:#fee2e2 !important; 
  border-color:#fca5a5 !important; 
  color:#e53e3e !important; 
}

.dyn-add-btn {
  display:inline-flex !important; 
  align-items:center; 
  gap:5px;
  background:linear-gradient(135deg, var(--kr-mid), var(--kr-primary)) !important;
  border:none !important; 
  border-radius:20px !important; 
  padding:8px 18px; 
  font-size:.82rem;
  color:#fff !important; 
  font-weight:600; 
  cursor:pointer;
  transition:opacity .18s,transform .15s; 
  margin-top:8px;
}

.dyn-add-btn:hover { 
  opacity:.88; 
  transform:translateY(-1px); 
}

/* Dinamik kartlardaki select/input'ları tema CSS'i gizlese bile zorla göster */
.kr-dyn-card select,
.kr-dyn-card input:not([type=checkbox]) {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  position:static !important;
  height:42px !important;
  box-sizing:border-box !important;
  clip:auto !important;
  width:100% !important;
}

.kr-dyn-card input[type=checkbox] {
  opacity:1 !important; 
  visibility:visible !important; 
  width:15px !important; 
  height:15px !important;
  min-width:0 !important; 
  flex:0 0 auto !important; 
  display:inline-block !important;
}

/* Select'lerde tek ok */
.kr-dyn-card select { 
  min-height:38px !important; 
}

/* Dinamik kart grid'leri */
.kr-dyn-grid2 { 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:14px; 
}

.kr-dyn-grid3 { 
  display:grid; 
  grid-template-columns:1fr 1fr 1fr; 
  gap:14px; 
}

/* File Upload */
.kr-file-label {
  display:flex; 
  align-items:center; 
  justify-content:center;
  flex-direction:column; 
  gap:8px;
  border:2px dashed var(--kr-border); 
  border-radius:10px;
  padding:28px 20px; 
  cursor:pointer; 
  transition:all .2s;
  background:#fff; 
  text-align:center; 
  color:#64748b;
}

.kr-file-label:hover { 
  border-color:var(--kr-primary); 
  background:#eef2ff; 
}

.kr-file-label strong { 
  font-size:.9rem; 
  color:var(--kr-text); 
}

.kr-file-label span {  
  font-size:.82rem; 
}

.kr-file-name { 
  font-size:.8rem; 
  color:var(--kr-primary); 
  font-weight:600; 
  margin-top:4px; 
}

input[type="file"].kr-hidden { 
  display:none; 
}

/* Message Box */
.kr-msg { 
  padding:14px 18px; 
  border-radius:8px; 
  font-size:.9rem; 
  font-weight:500; 
  margin-bottom:22px; 
}

.kr-msg.success { 
  background:#dcfce7; 
  color:#166534; 
  border:1px solid #bbf7d0; 
}

.kr-msg.error {  
  background:#fee2e2; 
  color:#991b1b; 
  border:1px solid #fecaca; 
}

/* Submit Button */
.kr-submit {
  display:block !important; 
  width:100%;
  background:linear-gradient(135deg, var(--kr-darkest) 0%, var(--kr-mid) 50%, var(--kr-primary) 100%) !important;
  color:#fff !important; 
  border:none !important;
  border-radius:20px !important; 
  padding:14px;
  font-size:1.05rem; 
  font-weight:700; 
  letter-spacing:.4px;
  cursor:pointer; 
  transition:opacity .2s,transform .15s; 
  margin-top:10px;
}

.kr-submit:hover { 
  opacity:.9; 
  transform:translateY(-1px); 
}

.kr-submit:active { 
  transform:none; 
}

/* Success Screen */
.kr-success-screen { 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  padding:70px 40px; 
  text-align:center; 
}

.kr-success-icon { 
  font-size:4.5rem; 
  margin-bottom:16px; 
  color:#166534; 
}

.kr-success-screen h2 { 
  color:#166534; 
  font-size:1.7rem; 
  margin:0 0 10px; 
}

.kr-success-screen p {  
  color:#475569; 
  font-size:.96rem; 
  margin:0; 
}

/* Engel raporu conditional */
.kr-cond .kr-file-label { 
  background:#fff; 
}

/* Responsive */
@media (max-width:680px) {
  .kr-grid-2,
  .kr-grid-3,
  .kr-grid-4 { 
    grid-template-columns:1fr; 
  }
  
  .kr-dyn-grid2, 
  .kr-dyn-grid3 { 
    grid-template-columns:1fr !important; 
  }
  
  .kr-dyn-card { 
    padding:12px 12px !important; 
  }
  
  .kr-body { 
    padding:22px 16px 28px; 
  }
  
  .kr-header { 
    padding:24px 18px 20px; 
  }
}

/* Form Validation Styles */
/* Not: Boş zorunlu alanlar için kırmızı kenarlık YOK.
   Zorunluluk yalnızca etiketteki * ile gösterilir; gönderimde eksik
   varsa ilgili alan geçici olarak amber (kırmızı değil) işaretlenir. */

.kr-group.kr-missing input,
.kr-group.kr-missing select,
.kr-group.kr-missing textarea {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

.kr-file-label.kr-missing {
  border-color: #f59e0b !important;
}

.kr-required-msg {
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  color: #9a3412;
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Loading State */
.kr-loading {
  opacity: 0.6;
  pointer-events: none;
}

.kr-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kr-spin 0.8s linear infinite;
}

@keyframes kr-spin {
  to { transform: rotate(360deg); }
}

/* Gönderim Overlay (form submit edilirken) */
.kr-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(2px);
  text-align: center;
  padding: 24px;
}

.kr-submit-overlay .kr-submit-spinner {
  width: 54px;
  height: 54px;
  border: 4px solid #c7d2fe;
  border-top-color: #011880;
  border-radius: 50%;
  animation: kr-spin 0.8s linear infinite;
}

.kr-submit-overlay .kr-submit-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #011880;
}

.kr-submit-overlay .kr-submit-sub {
  font-size: 0.85rem;
  color: #475569;
  max-width: 320px;
}