/* ==========================================================================
   Bioinci — Tasarım Sistemi
   Palet ambalajdan türetildi: yumuşak yeşil, kar beyazı, mürekkep, şampanya
   Derleme adımı yok; tek dosya, doğrudan sunucudan servis edilir.
   ========================================================================== */

:root {
    /* Renk */
    --yesil:        #6E9C78;
    --yesil-koyu:   #4E7A59;
    --yesil-acik:   #A8C6AE;
    --yesil-sis:    #EDF3EE;

    --murekkep:     #16241E;
    --murekkep-yumusak: #3D5449;
    --gri:          #7C8C84;

    --kagit:        #FFFFFF;
    --kagit-kirik:  #FBFCFB;
    --sedef:        #F2F6F2;

    --altin:        #C9B27A;
    --altin-acik:   #E8DCBE;

    /* Tipografi */
    --font-baslik: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
    --font-govde:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;

    /* Ölçek */
    --en: 1180px;
    --bosluk: clamp(4.5rem, 9vw, 8rem);
    --yumusak: 22px;

    /* Gölge — yeşile çalan, gri değil; ürün fotoğrafıyla uyum için */
    --golge-s: 0 1px 2px rgba(22, 36, 30, .05), 0 4px 12px rgba(22, 36, 30, .05);
    --golge-m: 0 2px 6px rgba(22, 36, 30, .05), 0 14px 40px rgba(22, 36, 30, .08);
    --golge-l: 0 30px 80px rgba(22, 36, 30, .12);

    --gecis: 520ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- temel -- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-govde);
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.72;
    color: var(--murekkep-yumusak);
    background: var(--kagit);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-family: var(--font-baslik);
    color: var(--murekkep);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }

p { margin: 0 0 1.1em; }
a { color: var(--yesil-koyu); }

/* Odak görünürlüğü — erişilebilirlik */
:focus-visible {
    outline: 2px solid var(--yesil-koyu);
    outline-offset: 3px;
    border-radius: 4px;
}

.kapsayici {
    width: min(100% - 2.5rem, var(--en));
    margin-inline: auto;
}

.bolum { padding-block: var(--bosluk); position: relative; }
.bolum--sis { background: var(--yesil-sis); }
.bolum--sedef { background: var(--sedef); }

/* Bölüm üstü küçük etiket */
.etiket {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--yesil-koyu);
    margin-bottom: 1.1rem;
}
.etiket::before {
    content: "";
    width: 26px; height: 1px;
    background: linear-gradient(90deg, var(--altin), transparent);
}

.giris {
    font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
    color: var(--murekkep-yumusak);
    max-width: 60ch;
}

.olcu-dar { max-width: 62ch; }
.ortala   { text-align: center; margin-inline: auto; }

/* ------------------------------------------------------------- başlık --- */

.ust {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-block: 1.15rem;
    transition: background var(--gecis), box-shadow var(--gecis), padding var(--gecis);
}
.ust__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.ust.yapisik {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 1px 0 rgba(22, 36, 30, .06);
    padding-block: .7rem;
}

.logo {
    font-family: var(--font-baslik);
    font-size: clamp(1.75rem, 1.55rem + .7vw, 2.15rem);
    line-height: 1;
    letter-spacing: .005em;
    color: var(--murekkep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .06em;
}
.logo span { color: var(--yesil); }
.logo sup {
    font-size: .38em;
    color: var(--gri);
    margin-left: .18em;
    align-self: flex-start;
    margin-top: .25em;
}

/* Ambalajdaki parıltı işareti — logonun içinde, yavaşça nefes alır */
.logo__yildiz {
    width: .3em;
    height: .3em;
    margin: 0 .06em 0 .04em;
    align-self: flex-start;
    margin-top: .18em;
    background: var(--altin);
    clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%,
                       50% 100%, 41% 59%, 0% 50%, 41% 41%);
    animation: logo-parla 4.5s ease-in-out infinite;
}
@keyframes logo-parla {
    0%, 100% { opacity: .55; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

.ust.yapisik .logo { font-size: clamp(1.5rem, 1.35rem + .5vw, 1.8rem); }
.logo { transition: font-size var(--gecis); }

.menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0; padding: 0;
}
.menu a {
    color: var(--murekkep-yumusak);
    text-decoration: none;
    font-size: .93rem;
    position: relative;
    padding-block: .3rem;
}
.menu a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--yesil);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 320ms ease;
}
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 860px) { .menu { display: none; } }

/* -------------------------------------------------------------- düğme --- */

.dugme {
    --d-zemin: var(--yesil-koyu);
    --d-yazi: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 2rem;
    border: 0;
    border-radius: 999px;
    background: var(--d-zemin);
    color: var(--d-yazi);
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 2px 8px rgba(78, 122, 89, .22), 0 10px 30px rgba(78, 122, 89, .18);
    transition: transform 320ms var(--gecis), box-shadow var(--gecis);
}
.dugme:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(78, 122, 89, .26), 0 18px 40px rgba(78, 122, 89, .22);
}
.dugme:active { transform: translateY(0); }

/* Işıltı: butonun üzerinden yavaşça geçen parlaklık şeridi */
.dugme::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255, 255, 255, .38) 48%,
        rgba(255, 255, 255, .06) 60%,
        transparent 72%);
    transform: translateX(-120%);
    animation: isilti 5.5s ease-in-out infinite;
}
@keyframes isilti {
    0%, 55%   { transform: translateX(-120%); }
    85%, 100% { transform: translateX(120%); }
}

.dugme--sade {
    --d-zemin: transparent;
    --d-yazi: var(--murekkep);
    box-shadow: inset 0 0 0 1px rgba(22, 36, 30, .16);
}
.dugme--sade:hover {
    box-shadow: inset 0 0 0 1px var(--yesil);
    transform: translateY(-2px);
}
.dugme--sade::after { display: none; }

/* --------------------------------------------------------------- hero --- */

.hero {
    position: relative;
    padding-block: clamp(8rem, 14vh + 6rem, 12rem) var(--bosluk);
    overflow: hidden;
}

/* Yumuşak ışık lekeleri — "ışıltı" hissinin zemini */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.hero::before {
    width: 46vw; height: 46vw;
    top: -14%; right: -10%;
    background: radial-gradient(circle, rgba(168, 198, 174, .55), transparent 68%);
    animation: yuz 22s ease-in-out infinite alternate;
}
.hero::after {
    width: 34vw; height: 34vw;
    bottom: -12%; left: -8%;
    background: radial-gradient(circle, rgba(232, 220, 190, .5), transparent 68%);
    animation: yuz 28s ease-in-out infinite alternate-reverse;
}
@keyframes yuz {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-4%, 5%, 0) scale(1.14); }
}

.hero__izgara {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
@media (max-width: 900px) {
    .hero__izgara { grid-template-columns: 1fr; text-align: center; }
    .hero__metin .giris { margin-inline: auto; }
    .rozetler { justify-content: center; }
    .hero__eylem { justify-content: center; }
}

.hero h1 { margin-bottom: .45em; }
.hero h1 em {
    font-style: normal;
    color: var(--yesil-koyu);
    position: relative;
    white-space: nowrap;
}
/* Vurgu altındaki ince şampanya çizgisi */
.hero h1 em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .08em;
    height: .1em;
    background: linear-gradient(90deg, var(--altin), var(--altin-acik));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: ciz 1.1s .7s var(--gecis) forwards;
}
@keyframes ciz { to { transform: scaleX(1); } }

.hero__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.2rem;
}

.rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.4rem;
}
.rozet {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem 1rem .42rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1px rgba(110, 156, 120, .28), var(--golge-s);
    backdrop-filter: blur(8px);
    font-size: .8rem;
    font-weight: 500;
    color: var(--yesil-koyu);
    letter-spacing: .01em;
}
.rozet svg { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------- ürün görsel alanı -- */

/* display:block — grid + place-items:center kullanılırsa sütun içeriğe göre
   boyutlanır. .urun-duzen'in tüm çocukları mutlak konumlu olduğu için içerik
   genişliği sıfırdır; bu durumda içindeki min(100%, …) belirsiz kalıp sıfıra
   düşebiliyor ve ürün görselleri kayboluyordu. Blok düzende genişlik kesindir. */
.urun-sahne {
    position: relative;
    display: block;
    min-height: 380px;
}
/* Ürünün arkasındaki hale */
.urun-sahne::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(78%, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%,
            rgba(255, 255, 255, .95) 0%,
            rgba(237, 243, 238, .9) 42%,
            rgba(168, 198, 174, .35) 68%,
            transparent 72%);
    box-shadow: 0 40px 90px rgba(78, 122, 89, .16);
}
.urun-sahne__gorsel {
    position: relative;
    width: min(100%, 560px);
    margin-inline: auto;
    filter: drop-shadow(0 26px 40px rgba(22, 36, 30, .18));
    animation: suzul 7s ease-in-out infinite;
}

/* --------------------------------------- şeffaf ürün görselleri (hero) -- */

/* Kutu arkada, tüp önde. İkisi de saydam PNG/WebP olduğu için gölgeler
   CSS ile veriliyor — her zeminde doğru durur. */
/* Ambalajlar uzun (yaklaşık 1:2,6) — genişliğe göre ölçeklenirse kutudan
   taşar. Bu yüzden YÜKSEKLİĞE göre boyutlanır, genişlik oranla gelir. */
.urun-duzen {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    aspect-ratio: 1 / 1.22;
    margin-inline: auto;
}

.urun-duzen picture { display: contents; }

.urun-duzen img {
    position: absolute;
    height: auto;
    width: auto;
    max-width: none;
    will-change: transform;
}

.urun-duzen__kutu img {
    height: 93%;
    right: 4%;
    bottom: 6%;
    filter: drop-shadow(0 22px 26px rgba(22, 36, 30, .20));
    animation: suzul-kutu 9s ease-in-out infinite;
}

/* Tüp önde ve kutunun üzerine hafifçe biner — ambalaj fotoğrafındaki gibi */
.urun-duzen__tup img {
    height: 85%;
    left: 17%;
    bottom: 3%;
    z-index: 2;
    filter: drop-shadow(-6px 26px 30px rgba(22, 36, 30, .26));
    animation: suzul-tup 7s ease-in-out infinite;
}

/* Yerdeki ortak gölge — ürünlerin havada asılı durmasını engeller */
.urun-duzen::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 4%;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
                rgba(22, 36, 30, .22), transparent 70%);
    filter: blur(6px);
    z-index: 0;
    animation: golge-nefes 7s ease-in-out infinite;
}

/* İki ambalaj farklı ritimde süzülür; birlikte hareket etseler
   tek düz görsel gibi durur, ayrı ritim derinlik hissi verir. */
@keyframes suzul-tup {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-13px); }
}
@keyframes suzul-kutu {
    0%, 100% { transform: translateY(-5px); }
    50%      { transform: translateY(6px); }
}
@keyframes golge-nefes {
    0%, 100% { transform: scaleX(1);    opacity: .85; }
    50%      { transform: scaleX(.93);  opacity: .6; }
}

@media (max-width: 900px) {
    .urun-duzen { width: min(100%, 420px); }
}
@keyframes suzul {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* Görselin üzerinden geçen parlaklık */
.urun-sahne__parilti {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, .55) 50%,
        transparent 60%);
    mix-blend-mode: overlay;
    animation: gecis-parilti 7s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes gecis-parilti {
    0%, 70%, 100% { opacity: 0; transform: translateX(-40%); }
    80%           { opacity: 1; transform: translateX(40%); }
}

/* ------------------------------------------------------------ kartlar --- */

.izgara {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
}

.kart {
    position: relative;
    padding: 2.2rem 1.9rem;
    border-radius: var(--yumusak);
    background: var(--kagit);
    box-shadow: var(--golge-s);
    transition: transform var(--gecis), box-shadow var(--gecis);
    overflow: hidden;
}
.kart::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--yesil-acik), var(--altin), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 620ms var(--gecis);
}
.kart:hover { transform: translateY(-5px); box-shadow: var(--golge-m); }
.kart:hover::before { transform: scaleX(1); }

.kart__ikon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--yesil-sis);
    color: var(--yesil-koyu);
    margin-bottom: 1.3rem;
}
.kart__ikon svg { width: 23px; height: 23px; }
.kart h3 { margin-bottom: .5rem; }
.kart p  { margin: 0; font-size: .96rem; }

/* ------------------------------------------------------- bileşen listesi */

.bilesenler {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
}
.bilesen {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.15rem;
    border-radius: 14px;
    background: var(--kagit);
    box-shadow: inset 0 0 0 1px rgba(110, 156, 120, .16);
    font-size: .93rem;
    color: var(--murekkep);
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.bilesen:hover {
    transform: translateX(3px);
    box-shadow: inset 0 0 0 1px var(--yesil-acik), var(--golge-s);
}
.bilesen__nokta {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--yesil);
    flex: none;
    box-shadow: 0 0 0 4px rgba(110, 156, 120, .14);
}

/* ------------------------------------------------------------- içermez -- */

.icermez {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    margin-top: 2.5rem;
}
.icermez__oge {
    padding: 1.7rem 1.4rem;
    border-radius: 18px;
    background: var(--kagit);
    text-align: center;
    box-shadow: var(--golge-s);
}
.icermez__ad {
    font-family: var(--font-baslik);
    font-size: 1.6rem;
    color: var(--murekkep);
    display: block;
    margin-bottom: .3rem;
}
.icermez__sonuc {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--yesil-koyu);
    font-weight: 600;
}

/* -------------------------------------------------------------- adımlar - */

.adimlar {
    counter-reset: adim;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    margin-top: 3rem;
    padding: 0;
    list-style: none;
}
.adim { position: relative; padding-left: 4.2rem; }
.adim::before {
    counter-increment: adim;
    content: counter(adim, decimal-leading-zero);
    position: absolute;
    left: 0; top: -.35rem;
    font-family: var(--font-baslik);
    font-size: 2.4rem;
    color: var(--yesil-acik);
    line-height: 1;
}
.adim h3 { margin-bottom: .3rem; }
.adim p  { margin: 0; font-size: .94rem; }

/* ---------------------------------------------------------------- SSS --- */

.sss { margin-top: 3rem; }
.sss__oge {
    border-bottom: 1px solid rgba(22, 36, 30, .09);
}
.sss__soru {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
    color: var(--murekkep);
    text-align: left;
    cursor: pointer;
}
.sss__isaret {
    flex: none;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--yesil-sis);
    color: var(--yesil-koyu);
    transition: transform var(--gecis), background var(--gecis);
}
.sss__oge[data-acik="true"] .sss__isaret {
    transform: rotate(45deg);
    background: var(--yesil);
    color: #fff;
}
.sss__cevap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--gecis);
}
.sss__oge[data-acik="true"] .sss__cevap { grid-template-rows: 1fr; }
.sss__cevap > div { overflow: hidden; }
.sss__cevap p {
    margin: 0;
    padding-bottom: 1.6rem;
    max-width: 68ch;
    font-size: .97rem;
}

/* ------------------------------------------------------------- ambalaj -- */

.ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 860px) { .ikili { grid-template-columns: 1fr; } }

.ambalaj-gorsel {
    position: relative;
    border-radius: var(--yumusak);
    background: linear-gradient(145deg, var(--kagit), var(--yesil-sis));
    padding: clamp(2rem, 4vw, 3.4rem);
    box-shadow: var(--golge-m);
    display: grid;
    place-items: center;
    min-height: 300px;
}

/* --------------------------------------------------------------- kapak -- */

.kapak {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--murekkep) 0%, #22392F 55%, var(--yesil-koyu) 100%);
    color: rgba(255, 255, 255, .82);
    text-align: center;
}
.kapak::before {
    content: "";
    position: absolute;
    width: 60vw; height: 60vw;
    top: -30%; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(201, 178, 122, .22), transparent 62%);
    filter: blur(60px);
}
.kapak h2 { color: #fff; position: relative; }
.kapak p  { position: relative; margin-inline: auto; }
.kapak .dugme {
    --d-zemin: #fff;
    --d-yazi: var(--murekkep);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------- alt ---- */

.alt {
    background: var(--murekkep);
    color: rgba(255, 255, 255, .58);
    padding-block: 4rem 2.5rem;
    font-size: .89rem;
}
.alt a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.alt a:hover { color: #fff; text-decoration: underline; }
.alt__izgara {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1.4fr 1fr 1fr;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 760px) { .alt__izgara { grid-template-columns: 1fr; } }
.alt h4 {
    color: #fff;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
    font-weight: 600;
}
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.alt .logo { color: #fff; }
.alt .logo sup { color: rgba(255,255,255,.5); }
.alt__kunye {
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    font-size: .82rem;
    color: rgba(255, 255, 255, .45);
}

/* -------------------------------------------------------- parıltılar --- */

.parilti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
/* Koyu kapak bölümünde parıltılar metnin üstünde kalabilir */
.kapak .parilti { z-index: 0; }

.yildiz {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--boy);
    height: var(--boy);
    margin: calc(var(--boy) / -2);
    background: var(--y-renk, var(--altin));
    /* markanın 4 uçlu parıltı işareti */
    clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%,
                       50% 100%, 41% 59%, 0% 50%, 41% 41%);
    opacity: 0;
    transform: scale(.4) rotate(0deg);
    animation: yildiz-parla var(--sure, 6s) ease-in-out var(--gecikme, 0s) infinite;
    will-change: opacity, transform;
}

.yildiz--altin { --y-renk: var(--altin); }
.yildiz--yesil { --y-renk: var(--yesil-acik); }
.yildiz--beyaz { --y-renk: #FFFFFF; }

/* Koyu zeminde altın ve beyaz daha görünür olsun */
.kapak .yildiz--yesil { --y-renk: #BFD8C5; }

@keyframes yildiz-parla {
    0%, 100% { opacity: 0;   transform: scale(.35) rotate(0deg); }
    45%      { opacity: 0;   transform: scale(.35) rotate(0deg); }
    62%      { opacity: .85; transform: scale(1)   rotate(45deg); }
    78%      { opacity: .35; transform: scale(.8)  rotate(70deg); }
    92%      { opacity: 0;   transform: scale(.4)  rotate(90deg); }
}

/* Bölüm içerikleri parıltıların üstünde kalsın */
.bolum > .kapsayici,
.hero > .kapsayici { position: relative; z-index: 2; }

/* ------------------------------------------------- görünüm animasyonu --- */

[data-goster] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 900ms var(--gecis), transform 900ms var(--gecis);
    transition-delay: var(--gecikme, 0ms);
}
[data-goster].gorundu { opacity: 1; transform: none; }

/* ------------------------------------------- hareket azaltma tercihi ---- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-goster] { opacity: 1; transform: none; }
}

/* Yalnızca tüp gösterildiğinde (kutu görseli yoksa) ortala ve büyüt */
.urun-duzen--tek { aspect-ratio: 1 / 1.05; }
.urun-duzen--tek .urun-duzen__tup img {
    height: 94%;
    left: 50%;
    bottom: 4%;
    translate: -50% 0;
}
.urun-duzen--tek::after { left: 24%; right: 24%; }

/* ========================================================== paketler === */

.paketler {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    margin-top: 3rem;
    align-items: stretch;
}

.paket {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 2.2rem 1.5rem 1.6rem;
    border-radius: var(--yumusak);
    background: var(--kagit);
    box-shadow: var(--golge-s);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.paket:hover { transform: translateY(-4px); box-shadow: var(--golge-m); }

.paket--one-cikan {
    box-shadow: 0 0 0 2px var(--yesil), var(--golge-m);
    background: linear-gradient(180deg, #fff, var(--yesil-sis));
}

.paket__rozet {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    padding: .3rem 1rem;
    border-radius: 999px;
    background: var(--yesil-koyu);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(78, 122, 89, .3);
}

.paket__adet {
    font-family: var(--font-baslik);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--murekkep);
}
.paket__adet span { font-size: .95rem; color: var(--gri); }

.paket__birim {
    margin-top: .9rem;
    font-size: 1.05rem;
    color: var(--yesil-koyu);
    font-weight: 500;
}
.paket__birim span { font-size: .82rem; color: var(--gri); font-weight: 400; }

.paket__toplam {
    margin-top: .5rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--murekkep);
}

.paket__kazanc {
    margin-top: .3rem;
    font-size: .84rem;
    color: var(--yesil-koyu);
    font-weight: 500;
    min-height: 1.3em;
}
.paket__kazanc--bos { color: var(--gri); font-weight: 400; }

.paket form, .paket > button { margin-top: auto; }

/* ============================================================ sepet ==== */

.sayfa {
    padding-block: clamp(7rem, 12vh + 4rem, 10rem) var(--bosluk);
    min-height: 70vh;
}

.bildirim {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    font-size: .93rem;
    margin-bottom: 1.6rem;
}
.bildirim--basarili { background: #E9F5EC; color: #1F6B3A; }
.bildirim--hata     { background: #FDECEA; color: #B3261E; }

.sepet-duzen {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 860px) { .sepet-duzen { grid-template-columns: 1fr; } }

.sepet-satir {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(22, 36, 30, .08);
}
.sepet-satir__gorsel {
    width: 82px; height: 82px; flex: none;
    border-radius: 12px;
    background: var(--yesil-sis);
    display: grid; place-items: center;
    overflow: hidden;
}
.sepet-satir__gorsel img { width: 100%; height: 100%; object-fit: contain; }
.sepet-satir__bilgi { flex: 1; min-width: 0; }
.sepet-satir__bilgi h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.sepet-satir__adet { width: 82px; flex: none; }
.sepet-satir__adet input { width: 100%; text-align: center; min-width: 0; }
.sepet-satir__tutar { width: 120px; flex: none; text-align: right; font-weight: 600; font-size: 1.1rem; }

/*
   Dar ekranda sepet satiri tasiyordu: gorsel 82 + adet 82 + tutar 120 ve
   uc bosluk = ~342px. 360px telefonda kapsayici zaten 320px. Sabit
   genislikler toplami tek satira sigmiyor, gorsel + bilgi ustte, adet +
   tutar altta olacak sekilde sariliyor.
*/
@media (max-width: 620px) {
    .sepet-satir { flex-wrap: wrap; gap: .8rem 1rem; }
    .sepet-satir__gorsel { width: 64px; height: 64px; }
    .sepet-satir__bilgi { flex: 1 1 55%; }
    .sepet-satir__adet  { order: 3; }
    .sepet-satir__tutar { order: 4; width: auto; flex: 1 1 auto; }
    .sepet-satir > button { flex: none; }
}

.ozet-kutu {
    padding: 1.6rem;
    border-radius: var(--yumusak);
    background: var(--yesil-sis);
    position: sticky;
    top: 6rem;
}
/* Tek sutuna dusunce ozet zaten en altta; yapiskanlik uzun kutuyu kilitliyor */
@media (max-width: 860px) { .ozet-kutu { position: static; } }
.ozet-satir {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    font-size: .95rem;
}
/* Urun adi sarilsin, tutar bolunmesin */
.ozet-satir > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ozet-satir > span:last-child  { white-space: nowrap; flex: none; }
.ozet-satir--toplam {
    margin-top: .6rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(22, 36, 30, .12);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--murekkep);
}

/* ======================================================= form / ödeme = */

.form-alan { margin-bottom: 1.1rem; }
.form-alan label {
    display: block;
    font-size: .88rem;
    font-weight: 500;
    color: var(--murekkep);
    margin-bottom: .35rem;
}
.form-alan input, .form-alan select, .form-alan textarea {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid rgba(22, 36, 30, .16);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: var(--murekkep);
    transition: border-color .18s, box-shadow .18s;
}
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus {
    outline: none;
    border-color: var(--yesil);
    box-shadow: 0 0 0 3px rgba(110, 156, 120, .18);
}
.form-alan .yardim { font-size: .82rem; color: var(--gri); margin-top: .3rem; }
.form-alan .hata { color: #B3261E; font-size: .85rem; margin-top: .3rem; }
.zorunlu { color: #B3261E; }

/*
   Girdiler esnek satirlarin icindeyken kendi ic genisliklerinin altina
   inemiyordu (flex ogesinin varsayilan min-width degeri auto). Bir <input>
   ic genisligi ~200px oldugundan yanindaki dugmeyle birlikte 320px'lik
   telefon kapsayicisini asiyordu.
*/
.form-alan input, .form-alan select, .form-alan textarea { min-width: 0; max-width: 100%; }

.ikili-alan { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
/* 560px'de iki sutun ~250px'e dusuyor; etiket + girdi icin dar. 720'de tek sutun. */
@media (max-width: 720px) { .ikili-alan { grid-template-columns: 1fr; } }

/* --- telefon + kod gonder --- */
.gsm-satir { display: flex; gap: .5rem; align-items: stretch; }
.gsm-satir input { flex: 1 1 auto; min-width: 0; }
.gsm-satir__dugme { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.1rem; }

/* --- SMS kodu + dogrula --- */
.kod-satir { display: flex; gap: .5rem; align-items: stretch; }
.kod-satir__girdi {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.2rem;
}
.kod-satir__dugme { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.3rem; }

/* Cok dar ekranda dugmeler alt satira gecsin, kirpilmasin */
@media (max-width: 380px) {
    .gsm-satir, .kod-satir { flex-wrap: wrap; }
    .gsm-satir input, .kod-satir__girdi { flex: 1 1 100%; }
    .gsm-satir__dugme, .kod-satir__dugme { flex: 1 1 100%; }
}

.secim-grup { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.secim {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(22, 36, 30, .14);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.secim:hover { border-color: var(--yesil-acik); }
.secim:has(input:checked) {
    border-color: var(--yesil);
    background: var(--yesil-sis);
}
.secim input { margin-top: .25rem; flex: none; }
.secim strong { display: block; color: var(--murekkep); }
.secim small { color: var(--gri); }

.onay-satir {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    margin-bottom: .7rem;
}
.onay-satir input { margin-top: .3rem; flex: none; }

.iban-kutu {
    padding: 1.1rem 1.2rem;
    border-radius: 12px;
    background: #FDF6E3;
    font-size: .92rem;
    margin-top: .8rem;
}
.iban-kutu code {
    display: block;
    font-size: 1.02rem;
    letter-spacing: .04em;
    margin-top: .2rem;
    color: var(--murekkep);
    /* Bosluksuz yazilan IBAN dar ekranda tasiyordu */
    overflow-wrap: anywhere;
}

/* ========================================================== teşekkür == */

.tesekkur-basi { text-align: center; max-width: 46rem; margin-inline: auto; }
.tesekkur-ikon {
    width: 76px; height: 76px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: var(--yesil-sis);
    color: var(--yesil-koyu);
    display: grid; place-items: center;
}
.tesekkur-ikon svg { width: 38px; height: 38px; }
.siparis-no {
    display: inline-block;
    margin-top: .6rem;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    background: var(--murekkep);
    color: #fff;
    font-size: 1rem;
    letter-spacing: .04em;
}

/* --------------------------------------------------- SMS doğrulama ---- */

.dogrulama-kutu {
    margin-top: .8rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: var(--yesil-sis);
}

.dogrulama-tamam {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--yesil-koyu);
    font-weight: 500;
    font-size: .93rem;
}

.dugme[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}
.dugme[disabled]::after { display: none; }

/* ------------------------------------------------- sipariş takibi ----- */

.takip-kart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    background: var(--kagit);
    box-shadow: var(--golge-s);
    text-decoration: none;
    color: inherit;
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.takip-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-m); }

.durum-rozet {
    flex: none;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    background: var(--yesil-sis);
    color: var(--yesil-koyu);
    white-space: nowrap;
}
.durum-rozet--bekliyor   { background: #FDF6E3; color: #8A6D0B; }
.durum-rozet--kargolandi { background: #EAF3F9; color: #1B5E8A; }
.durum-rozet--iptal,
.durum-rozet--iade       { background: #FDECEA; color: #B3261E; }

/* Adım çizgisi */
.ilerleme {
    display: flex;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    counter-reset: adim;
}
.ilerleme__adim {
    flex: 1;
    position: relative;
    text-align: center;
    padding-top: 2.4rem;
    font-size: .82rem;
    color: var(--gri);
}
/* Bağlantı çizgisi */
.ilerleme__adim::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: rgba(22, 36, 30, .12);
}
.ilerleme__adim:first-child::before { display: none; }

.ilerleme__nokta {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(22, 36, 30, .16);
    display: grid;
    place-items: center;
    color: #fff;
}

.ilerleme__adim--tamam { color: var(--murekkep-yumusak); }
.ilerleme__adim--tamam::before { background: var(--yesil); }
.ilerleme__adim--tamam .ilerleme__nokta {
    background: var(--yesil);
    box-shadow: none;
}

.ilerleme__adim--simdi { color: var(--yesil-koyu); font-weight: 600; }
.ilerleme__adim--simdi::before { background: var(--yesil); }
.ilerleme__adim--simdi .ilerleme__nokta {
    background: var(--yesil-koyu);
    box-shadow: 0 0 0 4px rgba(110, 156, 120, .25);
}

@media (max-width: 560px) {
    .ilerleme__etiket { font-size: .72rem; }
}

/* ================================================= tıklanır bileşenler = */

.bilesenler li { list-style: none; }

.bilesen--tiklanir {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    gap: .8rem;
}
.bilesen__ad { flex: 1; }
.bilesen__ok {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    color: var(--yesil);
    opacity: .45;
    transition: opacity .2s, transform .2s;
}
.bilesen__ok svg { width: 15px; height: 15px; }
.bilesen--tiklanir:hover .bilesen__ok,
.bilesen--tiklanir:focus-visible .bilesen__ok {
    opacity: 1;
    transform: translateX(3px);
}

/* ============================================================= modal === */

.modal {
    width: min(100% - 2rem, 520px);
    max-height: min(88vh, 720px);
    padding: 0;
    border: 0;
    border-radius: var(--yumusak);
    background: var(--kagit);
    color: var(--murekkep-yumusak);
    box-shadow: 0 30px 90px rgba(22, 36, 30, .3);
    overflow: visible;
}
.modal::backdrop {
    background: rgba(22, 36, 30, .55);
    backdrop-filter: blur(3px);
}

/* Açılış animasyonu */
.modal[open] { animation: modal-gir .32s cubic-bezier(.22, .61, .36, 1); }
.modal[open]::backdrop { animation: modal-zemin .32s ease; }

@keyframes modal-gir {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes modal-zemin { from { opacity: 0; } to { opacity: 1; } }

.modal__kapat-form { margin: 0; }
.modal__kapat {
    position: absolute;
    top: .8rem; right: .8rem;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(22, 36, 30, .06);
    color: var(--murekkep-yumusak);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .18s;
    z-index: 2;
}
.modal__kapat:hover { background: rgba(22, 36, 30, .13); }
.modal__kapat svg { width: 16px; height: 16px; }

.modal__ic {
    padding: 2rem 1.9rem 1.5rem;
    overflow-y: auto;
    max-height: min(88vh, 720px);
}

.modal__etiket {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--yesil-koyu);
    margin-bottom: .7rem;
}

.modal__baslik {
    font-family: var(--font-baslik);
    font-size: 1.65rem;
    color: var(--murekkep);
    margin: 0 0 .15rem;
    line-height: 1.2;
}
.modal__latince {
    font-style: italic;
    color: var(--gri);
    font-size: .92rem;
    margin: 0 0 1.2rem;
}

.modal__kaynak {
    padding: .85rem 1rem;
    border-radius: 12px;
    background: var(--yesil-sis);
    font-size: .92rem;
    margin-bottom: 1.1rem;
}
.modal__kaynak span {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--yesil-koyu);
    margin-bottom: .15rem;
}

.modal__ozet { font-size: .98rem; margin-bottom: 1rem; }

.modal__liste {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.modal__liste li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .92rem;
}
.modal__liste li::before {
    content: "";
    position: absolute;
    left: .3rem; top: .62em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--yesil-acik);
}

.modal__uyari {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--gri);
    padding: .85rem 1rem;
    border-radius: 10px;
    background: var(--sedef);
    margin: 0 0 1.2rem;
}

.modal__alt {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(22, 36, 30, .09);
}
.modal__gezinme {
    background: none;
    border: 0;
    font: inherit;
    font-size: .9rem;
    color: var(--yesil-koyu);
    cursor: pointer;
    padding: .3rem .2rem;
    border-radius: 6px;
}
.modal__gezinme:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .modal[open], .modal[open]::backdrop { animation: none; }
    .bilesen--tiklanir:hover .bilesen__ok { transform: none; }
}

/* ============================================ hero: mobil sıra + giriş == */

/* Mobilde ürün görseli metinden ÖNCE gelsin — kullanıcı ilk açılışta
   ne sattığımızı görsün, sonra okusun. */
@media (max-width: 900px) {
    .hero__izgara { display: flex; flex-direction: column; }
    .hero__izgara .urun-sahne { order: 1; margin-bottom: 1.5rem; }
    .hero__izgara .hero__metin { order: 2; }
}

/* Sayfa ilk açıldığında ürün görselinin girişi.
   Süzülme döngüsü giriş bittikten sonra devreye girer (gecikmeli). */
@keyframes urun-giris {
    from { opacity: 0; transform: translateY(28px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes hale-giris {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: none; }
}

.urun-duzen__tup img {
    animation:
        urun-giris .85s cubic-bezier(.22, .61, .36, 1) .15s backwards,
        suzul-tup 7s ease-in-out 1s infinite;
}
.urun-duzen__kutu img {
    animation:
        urun-giris .85s cubic-bezier(.22, .61, .36, 1) .3s backwards,
        suzul-kutu 9s ease-in-out 1.15s infinite;
}
.urun-duzen::after {
    animation:
        hale-giris .9s ease-out .5s backwards,
        golge-nefes 7s ease-in-out 1.4s infinite;
}
.urun-sahne::before {
    animation: hale-giris 1.1s ease-out backwards;
}

/* ------------------------------------------- logo yıldızı: ışıldama --- */

.logo__yildiz {
    position: relative;
    animation:
        logo-parla 4.5s ease-in-out infinite,
        logo-isilti 4.5s ease-in-out infinite;
}

/* Parıltının çevresine yayılan ışık */
@keyframes logo-isilti {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(201, 178, 122, .5));
    }
    45% {
        filter: drop-shadow(0 0 7px rgba(201, 178, 122, .95))
                drop-shadow(0 0 14px rgba(232, 220, 190, .6));
    }
    55% {
        filter: drop-shadow(0 0 9px rgba(255, 245, 220, 1))
                drop-shadow(0 0 18px rgba(201, 178, 122, .7));
    }
}

/* Yıldızın arkasında genişleyip sönen halka */
.logo__yildiz::after {
    content: "";
    position: absolute;
    inset: -140%;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 248, 228, .85) 0%,
                rgba(201, 178, 122, .35) 35%,
                transparent 68%);
    opacity: 0;
    pointer-events: none;
    animation: logo-halka 4.5s ease-in-out infinite;
}
@keyframes logo-halka {
    0%, 30%, 100% { opacity: 0;   transform: scale(.5); }
    50%           { opacity: .9;  transform: scale(1); }
    70%           { opacity: 0;   transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
    .urun-duzen__tup img,
    .urun-duzen__kutu img,
    .urun-duzen::after,
    .urun-sahne::before,
    .logo__yildiz,
    .logo__yildiz::after { animation: none !important; }
}

/* Güvenlik ağı: animasyon herhangi bir sebeple çalışmazsa ürün görselleri
   yine de görünür kalmalı. 'backwards' fill-mode bunu garantiler; bu kural
   da başlangıç durumunu açıkça belirtir. */
.urun-duzen img { opacity: 1; }
.urun-duzen { min-height: 320px; }

/* ============================== ürün görselindeki parıltı ışıldaması == */

/* Ambalajdaki ✦ işaretinin tam üzerine oturur.
   Konum, tüp görselindeki işaretin ölçülmüş yeri (%70 en, %16 boy)
   kaptaki karşılığına çevrilerek bulundu. */
.urun-yildiz {
    position: absolute;
    z-index: 3;
    width: 34px;
    height: 34px;
    left: 57%;
    top: 15.9%;
    translate: -50% -50%;
    pointer-events: none;
}

/* Dört uçlu parıltı — markanın işaretiyle aynı form */
.urun-yildiz::before {
    content: "";
    position: absolute;
    inset: 26%;
    background: #FFFDF5;
    clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%,
                       50% 100%, 41% 59%, 0% 50%, 41% 41%);
    opacity: 0;
    animation: urun-yildiz-cak 6s ease-in-out 2s infinite;
}

/* Çevresine yayılan ışık */
.urun-yildiz::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 253, 245, .95) 0%,
                rgba(201, 178, 122, .45) 38%,
                transparent 70%);
    opacity: 0;
    animation: urun-yildiz-hale 6s ease-in-out 2s infinite;
}

/* Kısa bir çakma, sonra ikinci daha küçük çakma, sonra uzun sessizlik */
@keyframes urun-yildiz-cak {
    0%, 4%       { opacity: 0;   transform: scale(.3) rotate(0deg); }
    9%           { opacity: 1;   transform: scale(1.15) rotate(35deg); }
    15%          { opacity: 0;   transform: scale(.5) rotate(60deg); }
    20%          { opacity: 0;   transform: scale(.3) rotate(60deg); }
    25%          { opacity: .85; transform: scale(.85) rotate(85deg); }
    31%, 100%    { opacity: 0;   transform: scale(.3) rotate(110deg); }
}
@keyframes urun-yildiz-hale {
    0%, 4%    { opacity: 0;   transform: scale(.4); }
    9%        { opacity: .9;  transform: scale(1); }
    16%       { opacity: 0;   transform: scale(1.5); }
    25%       { opacity: .5;  transform: scale(.9); }
    32%, 100% { opacity: 0;   transform: scale(1.3); }
}

/* ======================= kart ikonları: görününce ışıldama (yıldız) == */

.kart__ikon { position: relative; }

/* Kart görünür olduğunda ikon bir kez parlar */
.kart.gorundu .kart__ikon {
    animation: ikon-parla 1.5s ease-out .35s 1;
}

@keyframes ikon-parla {
    0%   { box-shadow: 0 0 0 0 rgba(201, 178, 122, 0); }
    25%  {
        background: #FFFDF6;
        color: var(--altin);
        box-shadow: 0 0 0 5px rgba(201, 178, 122, .28),
                    0 0 22px 5px rgba(201, 178, 122, .5);
    }
    100% { box-shadow: 0 0 0 0 rgba(201, 178, 122, 0); }
}

/* İkonun köşesinde beliren dört uçlu yıldız */
.kart__ikon::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--altin);
    clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%,
                       50% 100%, 41% 59%, 0% 50%, 41% 41%);
    opacity: 0;
    pointer-events: none;
}
.kart.gorundu .kart__ikon::after {
    animation: ikon-yildiz 1.3s ease-out .45s 1;
}

@keyframes ikon-yildiz {
    0%   { opacity: 0; transform: scale(.2) rotate(-40deg); }
    30%  { opacity: 1; transform: scale(1.25) rotate(10deg); }
    55%  { opacity: .7; transform: scale(.9) rotate(35deg); }
    100% { opacity: 0; transform: scale(.4) rotate(70deg); }
}

@media (prefers-reduced-motion: reduce) {
    .urun-yildiz::before,
    .urun-yildiz::after,
    .kart.gorundu .kart__ikon,
    .kart.gorundu .kart__ikon::after { animation: none !important; }
}