/* Temel Ayarlar */
body {
    margin: 0;
    padding: 0;
    background-color: #0a0a0a; /* Koyu Lacivert/Siyah */
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scene {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    position: absolute;
}

/* --- BÖLÜM 1: HARİTA STİLLERİ --- */
.map-container {
    width: 90%;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px rgba(70, 130, 180, 0.3));
}

/* SVG içindeki illerin rengi (Senin SVG yapıştırıldığında bu stil işleyecek) */
#turkiye-svg path {
    fill: #1a2a3a;      /* Koyu Mavi İl Rengi */
    stroke: #2c3e50;    /* İl Sınırları */
    stroke-width: 0.5;
    transition: fill 0.3s;
}

/* Sadece Muğla ve Hatay'ı kırmızı renklendir */
#svg-turkiye-haritasi #mugla path,
#svg-turkiye-haritasi #hatay path {
    fill: #2e0a0d !important; /* Kırmızı */
    stroke: #330a0f !important;
    stroke-width: 1;
    filter: drop-shadow(0 0 8px rgba(230, 57, 70, 0.6));
}

/* Bizim JS ile çizeceğimiz bağlantı yolu */
.connection-line {
    fill: none;
    stroke: #e63946;    /* Kırmızı Hat */
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px #e63946);
    opacity: 0.8;
}

.city-dot {
    fill: #e63946;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { r: 4; opacity: 1; }
    50% { r: 8; opacity: 0.5; }
    100% { r: 4; opacity: 1; }
}

#connection-status {
    margin-top: 20px;
    font-family: 'Courier New', monospace;
    color: #4db8ff;
    font-size: 1.2rem;
}

/* --- BÖLÜM 2: KOKİNA STİLLERİ --- */
/* style.css içine ekle veya eskilerini güncelle */

#scene-kokina {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
    padding: 30px 0 30px 0; /* Üstten ve alttan genel boşluk */
    min-height: 100vh;
}

.kokina-wrapper {
    width: 100%;
    max-width: 380px;
    height: auto;
}

/* SVG Meyve Stilleri */
/* style.css -> Mevcut berry stillerini bunlarla değiştir */

/* SVG Meyve Stilleri (Artık Kırmızı!) */
.berry {
    fill: #c92a2a; /* Başlangıç rengi: Canlı bir Kırmızı */
    cursor: pointer;
    transition: all 0.3s ease-out;
    stroke: #8a1c1c; /* Koyu kırmızı kenarlık */
    stroke-width: 1px;
    /* Hafif bir gölge derinlik katar */
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.3));
}

/* Hover Efekti */
.berry:hover {
    fill: #e03131; /* Biraz daha açık kırmızı */
    transform: scale(1.05);
}

/* Tıklandığında (Aktif) - Parlama Efekti */
.berry.active {
    fill: #ff0000; /* Tam Parlak Neon Kırmızı */
    stroke: #ffcccc; /* Kenarlık beyaza yakın parlar */
    stroke-width: 2px;
    /* Güçlü bir dış parlama (Neon Glow) */
    filter: drop-shadow(0 0 10px #ff0000) drop-shadow(0 0 20px #ff0000);
    transform: scale(1.1);
    z-index: 10; /* Öne çıksın */
}

/* Dallar (Yeşil Rengi Güncelledik) */
.branches path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawBranch 4s ease-out forwards;
    /* stroke rengini HTML'de belirttik ama buradan da ezebiliriz */
    /* stroke: #1b4d3e; */ 
}

@keyframes drawBranch {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

#note-container {
    width: 90%;
    max-width: 350px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

#note-display {
    background: rgba(255, 255, 255, 0.08); /* Şeffaf beyaz */
    backdrop-filter: blur(12px); /* Buzlu cam efekti */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 20px 25px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    
    /* Hafif süzülme animasyonu */
    animation: floating 4s ease-in-out infinite;
    position: relative;
}

/* Dekoratif küçük bir kalp ikonu */
#note-display::after {
    content: '❤️';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px rgba(230, 57, 70, 0.5));
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Dalların çizilme animasyonunu İPTAL ET (Bozulmayı önler) */
.branches path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Çiçeğin nazikçe yukarı aşağı süzülmesi kalsın */
.kokina-wrapper {
    animation: float 6s ease-in-out infinite;
}
/* style.css içine ekle */
/* Zarf Konteynırı */
#final-envelope-container {
    position: relative;
    width: 300px;
    height: 200px; /* Sabit yükseklik çiçeğin kaymasını engeller */
    margin-top: 20px;
    z-index: 50;
}

/* Zarf Katmanları */
.envelope-back-layer, .envelope-front-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.envelope-back-layer { z-index: 1; }
.envelope-front-layer { z-index: 10; pointer-events: none; }

#envelope-flap { transform-origin: top; }

/* KART: Başlangıçta zarfın içinde gizli */
#final-card-content {
    position: absolute;
    width: 270px;
    left: 15px;
    top: 10px;
    z-index: 5; /* Arka ve ön katmanın arasında */
    background: #fffaf0;
    padding: 18px 15px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    text-align: center;
    box-sizing: border-box;
}

.card-inner h3 { font-family: 'Dancing Script', cursive; color: #e63946; margin: 0 0 10px 0; }
.card-inner p { color: #333; font-size: 0.9rem; margin: 5px 0; }
.card-inner .highlight { font-weight: bold; color: #e63946; margin-top: 10px; display: block; }


@media screen and (max-width: 768px) {
    .kokina-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 30px 0;
    }
}