:root {
    /* 210mm / 90mm = 2.333... Bu oranı kullanıyoruz. */
    --ticket-aspect-ratio: 2.3333; 
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
    font-family: 'Merriweather', serif; /* Ana font */
    overflow: hidden;
    color: #3f3f3f; /* Varsayılan metin rengi */
}

.main-container {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.site-header {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

#logo-img {
    max-height: 50px;
    width: auto;
}

#ticket-container {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: calc(100% / var(--ticket-aspect-ratio));
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    overflow: hidden;
}

#text-overlay, #scratch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#scratch-canvas {
    cursor: grabbing;
    z-index: 3;
}

#text-overlay {
    z-index: 2;
    pointer-events: none;
}

.ticket-text {
    position: absolute;
    margin: 0;
    padding: 5px; /* Metinlerin kutu kenarlarına yapışmasını engeller */
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif; /* Alanlar için daha okunaklı bir font */
    font-weight: 400; /* Normal kalınlık */
}

/* --- METİN KONUMLANDIRMA (Sizin şablonunuza göre ayarlandı) --- */
/* Bu değerler, biletin sol üst köşesini (0%, 0%) ve sağ alt köşesini (100%, 100%) olarak kabul eder. */

#passenger_name {
    top: 35.5%;          /* Yukarıdan boşluk */
    left: 8.5%;           /* Soldan boşluk */
    width: 35%;           /* Metin kutusunun genişliği */
    font-size: 2.1vh;     /* Ekran yüksekliğine göre dinamik boyut */
    text-align: left;
}

#departure_date {
    top: 49.5%;
    left: 8.5%;
    width: 35%;
    font-size: 2.1vh;
    text-align: left;
}

#destination {
    top: 46%;
    left: 55%;            /* Biletin sağ tarafına konumlandır */
    width: 38%;
    font-size: 4.5vh;     /* Büyük ve dikkat çekici */
    font-family: 'Merriweather', serif; /* Farklı, daha şık bir font */
    font-weight: 700;
    text-align: center;   /* Kendi kutusu içinde ortalı */
}

#message {
    top: 64%;
    left: 8.5%;
    width: 38%;           /* Mesaj kutusu biraz daha geniş */
    height: 28%;          /* Bu alana sığacak yükseklik */
    font-size: 1.7vh;
    line-height: 1.4;     /* Satır aralığı */
    text-align: left;
    display: flex;
    align-items: flex-start; /* Metni kutunun üstüne yasla */
    padding-top: 1%;      /* Üstten küçük bir boşluk */
}

.instructions, #loading-or-error {
    margin-top: 20px;
    color: #65676b;
    font-size: 0.9em;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

/* --- Responsive Ayarlar (Mobil Cihazlar İçin) --- */
@media (max-width: 600px) {
    .main-container {
        padding: 10px;
    }
    .logo {
        max-height: 40px;
    }
    .ticket-text {
        font-weight: 500; /* Mobil için biraz daha kalın */
    }
    #passenger_name, #departure_date {
        font-size: 1.9vh;
    }
    #destination {
        font-size: 4vh;
    }
    #message {
        font-size: 1.6vh;
    }
}