@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; }

.ktecf-back-link {
    position: fixed; left: 16px; top: 24px; z-index: 1100;
    display: flex; align-items: center; gap: 8px;
    color: #284f91; text-decoration: none; font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px; border: 1px solid #eee; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ktecf-back-link i { font-size: 14px; }
.ktecf-back-link:hover { transform: translateX(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
@media (max-width: 768px) {
  .ktecf-back-link { left: 8px; top: 16px; padding: 6px 10px; }
 
  .ktecf-container > .ktecf-back-link {
    position: static; left: auto; top: auto; 
    display: inline-flex; align-items: center; gap: 8px;
    margin: 6px auto 10px; 
  }
}

.ktecf-container { 
    font-family: 'Poppins', sans-serif;
    background-color: #fff; color: #333; line-height: 1.6;
    max-width: 1300px; margin: 30px auto; padding: 20px; text-align: center; 
}
.ktecf-container h1 { font-size: 2.5rem; margin-bottom: 6px; color: #000; }
.ktecf-title-icon { width: 48px; height: 48px; display: block; margin: 0 auto 6px; object-fit: contain; }
.ktecf-subtitle { font-size: 1.1rem; color: #7f8c8d; margin-bottom: 24px; }
.ktecf-card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.ktecf-card-wrapper {
    background-color: #fff; border: 1px solid #eee; padding: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; display: flex;
}
.ktecf-card-wrapper:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); }
.ktecf-card {
    color: #fff; padding: 28px 22px; text-align: center;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    min-height: 320px; transition: transform 0.3s ease; width: 100%;
}
.ktecf-card-wrapper:hover .ktecf-card { transform: scale(1.02); }

.ktecf-card-brown { background-color: #284f91; } 
.ktecf-card-deep-orange { background-color: #2ea9fb; }
.ktecf-card-lightblue { background-color: #1c6799; }
.ktecf-card-darkblue { background-color: #2C3E50; }

.ktecf-card i { font-size: 2.8rem; margin-bottom: 22px; color: #fff; }
.ktecf-icon { width: 2.8rem; height: 2.8rem; margin: 0 auto 22px; display: block; object-fit: contain; }
.ktecf-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.ktecf-card p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 22px; color: rgba(255, 255, 255, 0.9); flex-grow: 1; }
.ktecf-card h2, .ktecf-card p { word-break: break-word; }

.ktecf-btn-teklif {
    background: transparent; color: #fff; padding: 10px 16px; border-radius: 5px; text-decoration: none;
    font-weight: 600; border: 2px solid #fff; cursor: pointer; width: 100%; font-size: 0.95rem;
    transition: background-color 0.3s, color 0.3s; letter-spacing: 0.5px;
}
.ktecf-card-wrapper:hover .ktecf-card-brown .ktecf-btn-teklif { background-color: #fff; color: #6D4C41; }
.ktecf-card-wrapper:hover .ktecf-card-deep-orange .ktecf-btn-teklif { background-color: #fff; color: #BF360C; }
.ktecf-card-wrapper:hover .ktecf-card-lightblue .ktecf-btn-teklif { background-color: #fff; color: #3498DB; }
.ktecf-card-wrapper:hover .ktecf-card-darkblue .ktecf-btn-teklif { background-color: #fff; color: #2C3E50; }

.ktecf-hidden { display: none !important; }

#ktecf-modal-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center; z-index: 1000;
    animation: ktecf-fadeIn 0.3s ease;
}
.ktecf-modal-content {
    background-color: #f9f9f9; width: 90%; max-width: 550px;
    border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden; animation: ktecf-slideIn 0.4s ease;
}
.ktecf-modal-header { padding: 20px 30px; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.ktecf-modal-header h3 { font-size: 1.4rem; margin: 0; }
.ktecf-close-btn { font-size: 2rem; color: #fff; opacity: 0.8; cursor: pointer; transition: opacity 0.2s, transform 0.2s; line-height: 1; }
.ktecf-close-btn:hover { opacity: 1; transform: rotate(90deg); }
.ktecf-modal-content form { padding: 30px; }
.ktecf-input-group { position: relative; margin-bottom: 25px; }
.ktecf-input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; transition: color 0.3s ease; }
.ktecf-input-group input {
    width: 100%; padding: 15px 15px 15px 45px; border: none; border-bottom: 2px solid #ddd;
    background-color: transparent; font-family: 'Poppins', sans-serif; font-size: 1rem;
    transition: border-color 0.3s ease;
}
.ktecf-input-group input:focus { outline: none; border-bottom-color: #3498db; }
.ktecf-input-group input:focus + i { color: #3498db; }

.ktecf-modal-content form button[type="submit"] {
    width: 100%; padding: 15px; background-color: #3498db;
    color: #fff; border: none; border-radius: 5px; font-size: 1.1rem; font-weight: 600;
    cursor: pointer; transition: background-color 0.3s, transform 0.2s;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.ktecf-modal-content form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

.ktecf-theme-brown .ktecf-modal-header, .ktecf-theme-brown form button[type="submit"] { background-color: #284f91; }
.ktecf-theme-deep-orange .ktecf-modal-header, .ktecf-theme-deep-orange form button[type="submit"] { background-color: #2ea9fb; }
.ktecf-theme-lightblue .ktecf-modal-header, .ktecf-theme-lightblue form button[type="submit"] { background-color: #1c6799; }
.ktecf-theme-darkblue .ktecf-modal-header, .ktecf-theme-darkblue form button[type="submit"] { background-color: #2C3E50; }

.ktecf-theme-brown .ktecf-input-group input:focus { border-bottom-color: #284f91; }
.ktecf-theme-brown .ktecf-input-group input:focus ~ i { color: #284f91; }
.ktecf-theme-deep-orange .ktecf-input-group input:focus { border-bottom-color: #2ea9fb; }
.ktecf-theme-deep-orange .ktecf-input-group input:focus ~ i { color: #2ea9fb; }
.ktecf-theme-lightblue .ktecf-input-group input:focus { border-bottom-color: #1c6799; }
.ktecf-theme-lightblue .ktecf-input-group input:focus ~ i { color: #1c6799; }
.ktecf-theme-darkblue .ktecf-input-group input:focus { border-bottom-color: #2C3E50; }
.ktecf-theme-darkblue .ktecf-input-group input:focus ~ i { color: #2C3E50; }

@keyframes ktecf-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ktecf-slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
  .ktecf-container { margin: 20px auto; padding: 16px; }
  .ktecf-container h1 { font-size: 2rem; }
  .ktecf-title-icon { width: 40px; height: 40px; margin-bottom: 6px; }
  .ktecf-subtitle { margin-bottom: 20px; }
  .ktecf-card-container { grid-template-columns: 1fr; gap: 20px; }
  .ktecf-card-wrapper { padding: 10px; }
  .ktecf-card { padding: 22px 18px; min-height: 300px; }
  .ktecf-icon { width: 2.4rem; height: 2.4rem; margin-bottom: 18px; }
  .ktecf-card h2 { font-size: 1.15rem; margin-bottom: 10px; }
  .ktecf-card p { font-size: 0.95rem; margin-bottom: 18px; }
  .ktecf-btn-teklif { font-size: 0.95rem; padding: 10px 14px; }
}


@media (max-width: 480px) {
  .ktecf-container { margin: 16px auto; padding: 14px; }
  .ktecf-container h1 { font-size: 1.8rem; }
  .ktecf-card { min-height: 280px; padding: 20px 16px; }
  .ktecf-icon { width: 2.2rem; height: 2.2rem; margin-bottom: 16px; }
  .ktecf-btn-teklif { font-size: 0.9rem; padding: 10px 12px; }
}

.ktecf-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateX(calc(100% + 20px));
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ktecf-notification-show {
    transform: translateX(0);
}

.ktecf-notification-success {
    background-color: #2ecc71; 
    border-left: 5px solid #27ae60;
}

.ktecf-notification-error {
    background-color: #e74c3c; 
    border-left: 5px solid #c0392b;
}