/* Genel ayarlar */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: opacity 0.5s ease-in-out;

  background: linear-gradient(-45deg,
      #121212 0%,
      #6b6f72 12%,
      #2a2a2a 26%,
      #8a8f93 40%,
      #1f1f1f 55%,
      #6d7175 68%,
      #2b2b2b 82%,
      #9a9fa3 92%,
      #151515 100%
  );
  background-size: 800% 800%;
  animation: gradient 50s ease infinite; /* ease burada çalışır */

  display: flex;
  justify-content: center;
  padding-top: 16px;
  align-items: flex-start;
  position: relative;
}

/* sheen efekti aynı */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.04) 30%,
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.04) 70%,
      rgba(255,255,255,0.00) 100%);
  mix-blend-mode: overlay;
  filter: blur(18px);
  transform: translateX(-30%);
  animation: sheen 18s linear infinite;
  opacity: 0.85;
}

@keyframes sheen {
  0%   { transform: translateX(-30%) rotate(30deg); }
  50%  { transform: translateX(30%) rotate(-30deg); }
  100% { transform: translateX(-30%) rotate(30deg); }
}

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



/* FORM KUTUSU - Daha Büyük, Kiosk Uyumlu */
.form-container {
  background: rgba(255,255,255,0.70);
  padding: 36px 32px;
  border-radius: 20px;
  width: 90%;          /* sabit width kaldırıldı, ekranın %90'ı kadar */
  max-width: 450px;    /* maksimum genişlik */
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.025);
  -webkit-font-smoothing: antialiased;
}

/* Mobil uyumlu */
@media (max-width: 480px) {
  .form-container {
    width: 94%;         /* ekranın çoğunu kaplasın */
    padding: 24px 20px;
    border-radius: 16px;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.02);
  }
}


/* Başlık */
h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 24px; /* büyütüldü */
    color: #241F1F;
}

/* Logo */
.form-logo {
    display: block;
    width: 90%;
    margin: 0 auto 32px;
    text-align: center;
}
.form-logo img {
    width: auto;
    display: inline-block;
}

/* LABEL */
label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px; /* büyütüldü */
    font-weight: 600;
    color: #241F1F;
}

/* INPUT — Büyük, Parmak Dostu */
input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 16px; /* büyütüldü */
    margin-bottom: 8px;
    border: 2px solid #ccc;
    border-radius: 12px;
    font-size: 16px; /* büyütüldü */
    box-sizing: border-box;
    background: rgba(255,255,255,0.75);
    transition: border-color .16s ease, box-shadow .16s ease, transform .08s ease;
}

input:focus {
    outline: none;
    border-color: #241F1F;
    box-shadow: 0 6px 18px rgba(36,31,31,0.08);
    transform: translateY(-1px);
}


/* BUTON – Dev, Dikkat Çekici (gradient + hover) */
button,
button.submit-btn {
    width: 100%;
    padding: 16px;
    /* gradient ana renk: #241F1F (koyu) -> biraz ısıtılmış ton */
    background: linear-gradient(135deg, #171717 0%, #B0B0B0 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px; /* büyütüldü */
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(36,31,31,0.12);
    transition: background-color 0.4s ease-in-out, opacity 0.5s ease-in-out;
}

button:hover,
button.submit-btn:hover {
    transform: scale(0.90);
    box-shadow: 0 16px 40px rgba(36,31,31,0.16);
    background: linear-gradient(315deg, #171717 0%, #B0B0B0 100%);
}

/* küçük görsel düzeltme: buton focus */
button:focus,
button.submit-btn:focus {
    outline: none;
    transform: scale(0.90);
    box-shadow: 0 12px 34px rgba(36,31,31,0.18);
}

/* Mesajlar */
.success-msg, .error-msg {
    text-align: center;
    font-size: 18px;
    margin-bottom: 22px;
    padding: 8px 12px;
    border-radius: 10px;
    opacity: 1;
    transform: scale(1);
    
    /* ÖNEMLİ: Opaklık ve boyut değişikliklerinin yumuşak geçiş yapmasını sağlar. 
       Geçiş süresi 5 saniye olarak ayarlandı. */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.success-msg { background: rgba(39,174,96,0.10); color: #2b2626; border: 1px solid rgba(39,174,96,0.12); }
.error-msg   { background: rgba(231,76,60,0.10); color: #e74c3c;  border: 1px solid rgba(231,76,60,0.10); }

.success-msg.hide-and-shrink {
    /* Hedef opaklık: görünmez */
    opacity: 0; 
    
    /* Hedef boyut: sıfıra yakın (küçülme) */
    transform: scale(0.5);
}

/* fade sınıfı eklendiğinde solup aşağı doğru hafifçe kayıp gidecek */
.msg-fade {
  opacity: 0;
  transform: translateY(-8px);
}

/* Küçük cihazlarda da uyumlu kalsın */
@media (max-width: 480px) {
    .form-container {
        padding: 32px;
        width: 94%;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        padding: 18px;
        font-size: 18px;
    }

    button,
    button.submit-btn {
        padding: 20px;
        font-size: 20px;
        border-radius: 10px;
    }

    h2 {
        font-size: 26px;
    }

    .form-logo img { max-height: 72px; }
}

/* küçük yardımcı not: eğer buton class ile çağırıyorsan kullan */
.submit-btn { /* duplicate safe */ }

/* ekstra: placeholder rengi (daha yumuşak) */
::placeholder { color: #9aa0a6; opacity: 1; }
.fade-out {
    opacity: 0 !important;
}


/* KVKK Link Stili */
.kvkk-container a {
    color: #2b2626; /* Mavi renk vererek tıklanabilir olduğunu belirtiriz */
    text-decoration: underline;
    cursor: pointer;
}

/* =================================================== */
/* KVKK MODAL STİLLERİ                  */
/* =================================================== */

/* assets/css/style.css'e ekleyin */
.kvkk-container {
    /* 1. Flexbox ile yatay hizalamayı etkinleştir */
    display: flex; 
    
    /* 2. İçerikleri dikeyde (ortadan) hizala */
    align-items: center; 
    
    /* 3. Buton ile arasında biraz boşluk bırak */
    margin-bottom: 20px;
    
    /* Gerekirse, kutunun işaretlenmesi ile linkin arasında biraz boşluk bırakır */
    gap: 10px; 
}

.kvkk-container input[type="checkbox"] {
    /* Onay kutusunu metinden önce tut */
    order: 1; 
    /* Input'un varsayılan margin'ini sıfırlamak faydalı olabilir */
    margin: 0; 
    /* Dikey ortalama için gerekli */
   transform: scale(1.5);
    align-items: center; 
}

.kvkk-container label {
    /* Tüm metin ve linki tek bir blok olarak ele al */
    order: 2; 
    margin: 0; /* Etiketin varsayılan margin'lerini sıfırla */
    display: block;
    line-height: 2; /* Metnin satır yüksekliğini ayarla */
}

/* KVKK Metni Link Stili */
.kvkk-container a {
    color: #2b2626;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    font-weight: normal; /* Linkin metin içinde doğal görünmesini sağlar */
    display: inline; /* Linkin metin içinde akmasını sağlar */
}

/* =================================================== */
/* KVKK MODAL STİLLERİ - EKSİK KISIM */
/* =================================================== */

.kvkk-modal {
    display: none; /* JS açana kadar gizli kalmalı */
    position: fixed; 
    
    /* 💥 KRİTİK 1: Z-INDEX değeri. Çok yüksek olmalı. */
    z-index: 99999; /* En üstte görünmesini garantilemek için yüksek bir değer */
    
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    border-radius: 20px;
    border: none;
    background-color: rgba(0,0,0,0.7); /* Koyu overlay */
}

.kvkk-modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    width: 90%; 
    max-width: 600px; /* Metin alanı */
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    position: relative;
}

.kvkk-text-area {
    max-height: 100%; /* Belirli bir yükseklik verip kaydırma çubuğu ekle */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 15px; 
    line-height: 1.6;
    font-size: 0.95em;
    color: #444;
}

.kvkk-close-btn {
    color: #aaa;
    float: right;
    font-size: 30px;
    font-weight: 300;
    transition: color 0.2s;
}

.kvkk-close-btn:hover,
.kvkk-close-btn:focus {
    color: #e74c3c;
    cursor: pointer;
}

.accept-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background-color: #2ecc71; 
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.deco {
    text-decoration: underline;
}

.dpnone { 
    display: none;
}


/* KVKK Onay Kutusu Stil Kontrolü - PRIMARY: #241F1F */
.kvkk-container input[type="checkbox"] {
    /* 1. Tarayıcının varsayılan görünümünü sıfırla */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* 2. Boyutları belirle (Parmak dostu olması için büyüt) */
    width: 16px;
    height: 16px;
    
    /* 3. Arka plan rengini ve kenarlığı ayarla */
    background-color: #f0f0f0; /* Açık gri arka plan */
    border: 1px solid #aaa; /* Kenarlık */
    border-radius: 4px; 
    cursor: pointer;
    margin-left: 5px; 
    
    /* Dikey hizalamayı korumak için */
    display: inline-block;
    vertical-align: middle;
    
    /* Transition ekle */
    transition: all 0.2s ease-in-out;
}

/* 🌑 İşaretli Durum Stili (PRIMARY COLOR: #241F1F) */
.kvkk-container input[type="checkbox"]:checked {
    /* İşaretlendiğinde arka plan rengi -> PRIMARY COLOR */
    background-color: #241F1F; 
    border-color: #241F1F;
}

/* ⚪ İşaret İçi (Tik İşareti - Beyaz) */
.kvkk-container input[type="checkbox"]:checked::before {
    content: '\2713'; /* Unicode tik işareti */
    display: block;
    color: white; /* Tik işaretinin rengi (koyu arka plan üzerinde beyaz) */
    font-size: 10px; 
    text-align: center;
}

.fullscreen-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    font-size: 18px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
}

.fullscreen-toggle:hover {
    background: rgba(255,255,255,0.3);
}

.intro-text {
    text-align: center;
    font-size: 16px;           /* bir tık küçük, modern */
    font-weight: 400;
    color: #313131;            /* açık gri premium görünüm */
    margin-top: -20px;
    letter-spacing: 0.3px;     /* hafif premium dokunuş */
    -webkit-font-smoothing: antialiased;
    opacity: 0.85;             /* daha soft görünüm */
}

/* QR Alanı */
.qr-container {
    width: 410px;
    padding: 24px;
    border-radius: 18px;

    /* Glass + premium */
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25);

    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    text-align: center;
}

/* QR başlık */
.qr-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #241F1F;
}

/* QR görsel (ortalanmış + biraz nefesli) */
.qr-image {
    display: block;
    width: 100%;
    max-width: 320px;     /* istersen 280-360 arası oynarsın */
    margin: 20px auto 20px;  /* ortala */
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}


/* QR alt açıklama */
.qr-desc {
    font-size: 14px;
    color: #333;
    opacity: 0.85;
    line-height: 1.4;
}

.kiosk-layout { 
    display:flex; gap:40px; align-items:center; 
    
}