/* ===== RESET & BASE ===== */
 * {
     margin      : 0;
     padding     : 0;
     box-sizing  : border-box;
 }

 :root {
     --primary         : #FE5401;
     --primary-dark    : #FE9500;
     --primary-light   : #FFE9500;
     --secondary       : #00D4FF;
     --gradient-1      : linear-gradient(135deg, #FE5401 0%, #FE9500 100%);
     --gradient-2      : linear-gradient(135deg, #1a1a2e 0%, #702604 50%, #FE9500 100%);
     --glass-bg        : rgba(255, 255, 255, 0.08);
     --glass-border    : rgba(255, 255, 255, 0.15);
     --text-primary    : #FFFFFF;
     --text-secondary  : rgba(255, 255, 255, 0.7);
     --shadow          : 0 25px 60px rgba(0, 0, 0, 0.4);
     --radius          : 24px;
     --transition      : 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body {
     font-family      : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     min-height       : 100vh;
     display          : flex;
     justify-content  : center;
     align-items      : center;
     padding          : 20px;
     background       : var(--gradient-2);
     position         : relative;
     overflow-x       : hidden;
     flex-direction   : column;
 }

 /* Arka plan animasyonlu efektler */
 body::before {
     content   : '';
     position  : fixed;
     top       : -50%;
     left      : -50%;
     width     : 200%;
     height    : 200%;
     background:
         radial-gradient(circle at 20% 80%, rgba(108, 60, 225, 0.15) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 50% 50%, rgba(108, 60, 225, 0.05) 0%, transparent 70%);
     animation  : backgroundFloat 20s ease-in-out infinite;
     z-index    : 0;
 }

 @keyframes backgroundFloat {

     0%,
     100% {
         transform  : translate(0, 0) rotate(0deg);
     }

     33% {
         transform  : translate(2%, -2%) rotate(2deg);
     }

     66% {
         transform  : translate(-2%, 2%) rotate(-2deg);
     }
 }

 /* ===== ANA KART ===== */
 .container {
     position                 : relative;
     z-index                  : 1;
     background               : var(--glass-bg);
     backdrop-filter          : blur(20px);
     -webkit-backdrop-filter  : blur(20px);
     border                   : 1px solid var(--glass-border);
     border-radius            : var(--radius);
     padding                  : 45px 40px 50px;
     max-width                : 480px;
     width                    : 100%;
     text-align               : center;
     box-shadow               : var(--shadow);
     transition               : var(--transition);
 }

 .container:hover {
     transform   : translateY(-4px);
     box-shadow  : 0 30px 70px rgba(0, 0, 0, 0.5);
 }

 /* Glow efekti */
 .container::before {
     content        : '';
     position       : absolute;
     top            : -2px;
     left           : -2px;
     right          : -2px;
     bottom         : -2px;
     border-radius  : calc(var(--radius) + 2px);
     background     : var(--gradient-1);
     z-index        : -1;
     opacity        : 0.3;
     filter         : blur(20px);
     transition     : var(--transition);
 }

 .container:hover::before {
     opacity  : 0.6;
     filter   : blur(30px);
 }

 /* ===== BAŞLIK ===== */
 h2 {
     font-weight      : 700;
     font-size        : 2.4rem;
     letter-spacing   : -1px;
     color            : var(--text-primary);
     margin-bottom    : 8px;
     display          : flex;
     align-items      : center;
     justify-content  : center;
     gap              : 12px;
 }

 h2 span {
     background      : var(--gradient-1);
     color           : white;
     font-size       : 1rem;
     padding         : 2px 16px;
     border-radius   : 40px;
     line-height     : 32px;
     font-weight     : 600;
     letter-spacing  : 0.5px;
     box-shadow      : 0 4px 15px rgba(108, 60, 225, 0.3);
 }

 .sub {
     color           : var(--text-secondary);
     font-size       : 1rem;
     margin-bottom   : 32px;
     font-weight     : 400;
     letter-spacing  : 0.3px;
 }

 /* ===== INPUT ===== */
 .input-group {
     display         : flex;
     flex-direction  : column;
     gap             : 14px;
     margin-bottom   : 28px;
 }

 input {
     width           : 100%;
     padding         : 18px 24px;
     border          : 2px solid rgba(255, 255, 255, 0.12);
     border-radius   : 16px;
     font-size       : 1rem;
     background      : rgba(255, 255, 255, 0.06);
     transition      : var(--transition);
     outline         : none;
     color           : var(--text-primary);
     font-weight     : 500;
     letter-spacing  : 0.3px;
 }

 input::placeholder {
     color        : rgba(255, 255, 255, 0.35);
     font-weight  : 400;
 }

 input:focus {
     border-color  : var(--secondary);
     background    : rgba(255, 255, 255, 0.1);
     box-shadow    : 0 0 0 4px rgba(0, 212, 255, 0.1);
 }

 input:focus::placeholder {
     color  : rgba(255, 255, 255, 0.2);
 }

 /* ===== BUTONLAR ===== */
 .action-row {
     display          : flex;
     flex-wrap        : wrap;
     justify-content  : center;
     gap              : 10px;
     margin-top       : 4px;
 }

 button {
     padding          : 14px 24px;
     border           : none;
     border-radius    : 16px;
     font-weight      : 600;
     font-size        : 0.95rem;
     cursor           : pointer;
     transition       : var(--transition);
     display          : inline-flex;
     align-items      : center;
     justify-content  : center;
     gap              : 8px;
     flex             : 1 0 auto;
     min-width        : 100px;
     letter-spacing   : 0.3px;
     position         : relative;
     overflow         : hidden;
 }

 button::after {
     content        : '';
     position       : absolute;
     top            : 50%;
     left           : 50%;
     width          : 0;
     height         : 0;
     border-radius  : 50%;
     background     : rgba(255, 255, 255, 0.2);
     transition     : width 0.6s, height 0.6s, top 0.6s, left 0.6s;
 }

 button:active::after {
     width   : 300px;
     height  : 300px;
     top     : -100px;
     left    : -100px;
 }

 /* Ana buton - Gradient */
 button.primary {
     background  : var(--gradient-1);
     color       : white;
     box-shadow  : 0 8px 25px rgba(108, 60, 225, 0.35);
     flex        : 2;
 }

 button.primary:hover {
     transform   : translateY(-2px) scale(1.02);
     box-shadow  : 0 12px 35px rgba(108, 60, 225, 0.5);
 }

 /* İkincil butonlar - Glass */
 button:not(.primary) {
     background       : rgba(255, 255, 255, 0.08);
     color            : var(--text-primary);
     border           : 1px solid rgba(255, 255, 255, 0.12);
     backdrop-filter  : blur(10px);
 }

 button:not(.primary):hover {
     background    : rgba(255, 255, 255, 0.15);
     border-color  : rgba(255, 255, 255, 0.25);
     transform     : translateY(-2px);
 }

 .btn-icon {
     font-size    : 1.2rem;
     line-height  : 1;
 }

 /* ===== QR KUTUSU ===== */
 #qrBox {
     margin           : 30px auto 24px;
     padding          : 16px;
     background       : rgba(255, 255, 255, 0.05);
     backdrop-filter  : blur(10px);
     border-radius    : 20px;
     display          : inline-block;
     box-shadow       : 0 8px 32px rgba(0, 0, 0, 0.2);
     border           : 1px solid rgba(255, 255, 255, 0.06);
     transition       : var(--transition);
     min-height       : 232px;
     min-width        : 232px;
 }

 #qrBox:hover {
     transform   : scale(1.02);
     box-shadow  : 0 12px 40px rgba(0, 0, 0, 0.3);
 }

 #qrImage {
     display          : block;
     width            : 200px;
     height           : 200px;
     border-radius    : 16px;
     background       : white;
     image-rendering  : pixelated;
     transition       : var(--transition);
     object-fit       : contain;
 }

 /* ===== ALT BİLGİ ===== */
 .info-message {
     font-size       : 0.85rem;
     margin-top      : 20px;
     color           : rgba(255, 255, 255, 0.4);
     font-weight     : 400;
     border-top      : 1px solid rgba(255, 255, 255, 0.06);
     padding-top     : 20px;
     letter-spacing  : 0.5px;
 }

 .info-message span {
     color  : rgba(255, 255, 255, 0.6);
 }

 /* ===== TOAST BİLDİRİM ===== */
 .toast {
     position         : fixed;
     bottom           : 30px;
     left             : 50%;
     transform        : translateX(-50%) translateY(100px);
     background       : rgba(0, 0, 0, 0.85);
     backdrop-filter  : blur(20px);
     color            : white;
     padding          : 16px 32px;
     border-radius    : 16px;
     font-weight      : 500;
     font-size        : 0.95rem;
     box-shadow       : 0 12px 40px rgba(0, 0, 0, 0.4);
     z-index          : 1000;
     opacity          : 0;
     transition       : all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events   : none;
     border           : 1px solid rgba(255, 255, 255, 0.1);
     max-width        : 90%;
 }

 .toast.show {
     opacity    : 1;
     transform  : translateX(-50%) translateY(0);
 }

 .toast.success {
     border-color  : rgba(0, 212, 255, 0.3);
 }

 .toast.error {
     border-color  : rgba(255, 82, 82, 0.3);
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 520px) {
     .container {
         padding        : 30px 20px 35px;
         border-radius  : 20px;
     }

     h2 {
         font-size  : 1.8rem;
         gap        : 8px;
     }

     h2 span {
         font-size    : 0.85rem;
         padding      : 0 12px;
         line-height  : 28px;
     }

     button {
         font-size      : 0.85rem;
         padding        : 12px 16px;
         min-width      : 70px;
         border-radius  : 12px;
     }

     #qrImage {
         width   : 160px;
         height  : 160px;
     }

     #qrBox {
         min-height  : 192px;
         min-width   : 192px;
         padding     : 12px;
     }

     .toast {
         padding    : 14px 24px;
         font-size  : 0.85rem;
         bottom     : 20px;
     }
 }

 .top-link {
     width       : 100%;
     text-align  : center;
     margin      : 25px 0 15px;
     z-index     : 9999;

     position       : relative;
     z-index        : 1;
     border-radius  : var(--radius);
     max-width      : 480px;
     width          : 100%;
     text-align     : center;
     transition     : var(--transition);
 }

 .top-link a {
display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .4px;
    color: #fff;
    background: var(--gradient-1);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 25px rgba(254, 84, 1, .35), 0 0 20px rgba(254, 149, 0, .25);
    transition: all .3s ease;
    width: 100%;
    height: 70px;
    border-radius: 15px;
 }

 .top-link a:hover {
     transform  : translateY(-3px);
     box-shadow :
         0 15px 35px rgba(254, 84, 1, .45),
         0 0 30px rgba(254, 149, 0, .4);
 }

 .top-link a:active {
     transform  : scale(.97);
 }



 @media (max-width: 380px) {
     .action-row {
         flex-direction  : column;
     }

     button {
         flex   : 1;
         width  : 100%;
     }

     button.primary {
         flex  : 1;
     }
 }

 /* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
     width  : 6px;
 }

 ::-webkit-scrollbar-track {
     background  : transparent;
 }

 ::-webkit-scrollbar-thumb {
     background     : rgba(255, 255, 255, 0.2);
     border-radius  : 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background  : rgba(255, 255, 255, 0.3);
 }

 /* Loading spinner for QR */
 .loading {
     animation  : pulse 1.5s ease-in-out infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         opacity  : 1;
     }

     50% {
         opacity  : 0.5;
     }
 }