/* Tema 2: Gradient Accent */
.card1 {
    /* Arka plan: iki kademeli gradient + hafif cam */
    background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(255,255,255,0.22));
    backdrop-filter: blur(10px);
    /*  -webkit-backdrop-filter: blur(10px);*/
    /* Kenar: gradientli kesik çizgi */
    /*   border: 2px dashed transparent;*/
    border-radius: 40px;
    background-clip: padding-box; /* dashed rengini dışa taşırmamayı sağlar */
    /* Pseudo ile gradient kenar */
    position: relative;
    padding: 1em 2em;
    color: #0f172a; /* koyu metin */
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    /* Gölge ve geçiş */
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
    transition: transform .2s ease, box-shadow .2s ease;
    /* İŞTE ARADIĞINIZ ÖZELLİK: Dış Boşluk */
    margin-top: 10px; /* Üst */
    margin-right: 40px; /* Sağ */
    margin-bottom: 0px; /* Alt */
    margin-left: 10px; /* Sol */
    /* Kenar çizgisi: 1px kalınlığında, yarı saydam siyah ve KESİK KESİK (dashed). */
    /* border: 1px dashed rgba(0, 0, 0, 0.4);*/
}

    .card1::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px 2px; /* border kalınlığı */
        background: linear-gradient(135deg, #60a5fa, #22c55e);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; /* Chrome */
        mask-composite: exclude; /* Firefox */
        pointer-events: none;
    }



    .card1:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(16, 24, 40, 0.25);
    }

.divbutton {
    /* --- SENİN KODLARIN --- */
    display: flex; /* İkon ve yazıyı yan yana getirir */
    /* İŞTE ARADIĞINIZ ÖZELLİK: Dış Boşluk */
    margin-top: 20px; /* Üst */
    margin-right: 40px; /* Sağ */
    margin-bottom: 0px; /* Alt */
    margin-left: 40px; /* Sol */
    padding: 4px 4px; /* İçeriği kenara çok yakın tutar (Sıkı görünüm) */
    /* --- GÖRÜNÜR OLMASI İÇİN EKLEDİKLERİM --- */
    border: 0px solid #333; /* Siyah ince bir çerçeve */
    background-color: #eee; /* Açık gri arka plan */
    width: fit-content; /* Genişliği içeriği kadar olsun */
    cursor: pointer; /* Üzerine gelince el işareti çıksın */
    gap: 40px;
}


.mycontainer {
    /* Esnek kutu düzenini açar. İçindeki öğelerin (çocukların) hizalanmasını yönetir. */
    display: flex;
    /* "Sığmayan aşağı insin" özelliğidir.
       Kutular satıra sığmadığında sıkışmak yerine bir alt satıra geçer. */
    flex-wrap: wrap;
    /* (Pasif durumda) Aktif edersen, içindeki öğeleri yatay eksende tam ortaya hizalar. */
    /* justify-content: center; */
    /* Flex öğeleri (çocuklar) arasında hem yatay hem dikey boşluk bırakır.
       2rem, tarayıcı varsayılanında genellikle 32px'e denk gelir. */
    gap: 1rem;
    /* Kapsayıcının kendi iç boşluğudur.
       1em: Üst ve Alt boşluk (Yazı boyutuna göre değişir).
       1.5em: Sağ ve Sol boşluk. */
    
    /* İŞTE ARADIĞINIZ ÖZELLİK: Dış Boşluk */
    margin-top: 10px; /* Üst */
    margin-right: 40px; /* Sağ */
    margin-bottom: 0px; /* Alt */
    margin-left: 10px; /* Sol */
    border-radius: 40px;
}