/* =========================================================
SEAACADEMYIK — AJANS HİZMETLERİ
COMPONENTS.CSS
Kartlar • Form parçaları • Upload alanları • UI bileşenleri
Klasör: /ajans-hizmetleri/css/components.css
========================================================= */


/* =========================================================
1. CARD SYSTEM (GENEL KART YAPISI)
========================================================= */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:16px;
  position:relative;
  overflow:hidden;
}

.card:hover{
  border-color: rgba(255,122,0,.35);
  box-shadow:0 28px 80px rgba(0,0,0,.45);
}

.card-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
}
.card-sub{
  font-size:13.8px;
  color:var(--muted);
  line-height:1.6;
}

/* glow line */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,122,0,.15), transparent);
  opacity:.2;
  pointer-events:none;
}


/* =========================================================
2. BUTTON SYSTEM
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.2px;
  border:none;
  cursor:pointer;
  transition:.2s;
}

.btn-primary{
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  color:#1a0b00;
  box-shadow:0 15px 40px rgba(255,122,0,.25);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 55px rgba(255,122,0,.35);
}

.btn-outline{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  color:var(--text);
}
.btn-outline:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,122,0,.15);
}

.btn-dark{
  background:#000;
  border:1px solid rgba(255,255,255,.12);
}
.btn-dark:hover{background:#0d0d0d}

.btn-sm{padding:8px 12px;font-size:13px}
.btn-lg{padding:16px 20px;font-size:15px}
.btn-block{width:100%}


/* =========================================================
3. FORM COMPONENTS
========================================================= */
.form-group{
  margin-bottom:14px;
}

.form-label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}

.form-control{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:14px;
  outline:none;
  transition:.18s;
}

.form-control::placeholder{
  color:rgba(255,255,255,.4);
}

.form-control:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,0,.18);
  background:rgba(0,0,0,.35);
}

textarea.form-control{
  min-height:120px;
  resize:vertical;
}


/* SELECT */
select.form-control{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #fff 50%),
                   linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px),
                       calc(100% - 14px) calc(50% - 3px);
  background-size:6px 6px;
  background-repeat:no-repeat;
  padding-right:36px;
}


/* =========================================================
4. FORM GRID
========================================================= */
.form-row{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media(min-width:768px){
  .form-row.two{
    grid-template-columns:1fr 1fr;
  }
  .form-row.three{
    grid-template-columns:1fr 1fr 1fr;
  }
}


/* =========================================================
5. UPLOAD AREA
========================================================= */
.upload-box{
  border:2px dashed rgba(255,255,255,.18);
  border-radius:16px;
  padding:18px;
  background:rgba(255,255,255,.03);
  text-align:center;
  transition:.18s;
  position:relative;
}

.upload-box:hover{
  border-color:var(--accent);
  background:rgba(255,122,0,.05);
}

.upload-box input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.upload-icon{
  font-size:26px;
  margin-bottom:8px;
  opacity:.85;
}

.upload-title{
  font-weight:800;
  font-size:14px;
}
.upload-desc{
  font-size:12.5px;
  color:var(--muted);
  margin-top:4px;
}


/* =========================================================
6. BADGE / TAG
========================================================= */
.tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
}

.tag-orange{
  background:rgba(255,122,0,.15);
  border-color:rgba(255,122,0,.4);
  color:#ffd6b5;
}

.tag-green{
  background:rgba(46,229,157,.15);
  border-color:rgba(46,229,157,.4);
  color:#cffff1;
}


/* =========================================================
7. SUCCESS / ALERT
========================================================= */
.alert{
  padding:14px;
  border-radius:14px;
  font-weight:600;
  font-size:14px;
}

.alert-success{
  background:rgba(46,229,157,.15);
  border:1px solid rgba(46,229,157,.45);
  color:#d7fff3;
}

.alert-error{
  background:rgba(255,70,70,.15);
  border:1px solid rgba(255,70,70,.4);
  color:#ffd6d6;
}

.alert-info{
  background:rgba(0,140,255,.15);
  border:1px solid rgba(0,140,255,.35);
}


/* =========================================================
8. SIDE INFO BOX
========================================================= */
.info-box{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.info-box strong{
  display:block;
  font-size:14px;
}
.info-box span{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}


/* =========================================================
9. IMAGE CARD
========================================================= */
.img-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.img-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* =========================================================
10. MINI ICON BUTTON
========================================================= */
.icon-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  transition:.2s;
}
.icon-btn:hover{
  background:rgba(255,122,0,.15);
  border-color:var(--accent);
}


/* =========================================================
11. LOADING BUTTON
========================================================= */
.btn-loading{
  pointer-events:none;
  opacity:.7;
  position:relative;
}

.btn-loading::after{
  content:"";
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.4);
  border-top:2px solid #fff;
  border-radius:50%;
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  animation:spin .7s linear infinite;
}

@keyframes spin{
  to{transform:translateY(-50%) rotate(360deg);}
}