/* =========================================================
   CleanMax — site tasarım sistemi (Figma "Cleanora" birebir)
   ========================================================= */
:root {
    --mor: #9a83f7;
    --mor-2: #8a70f6;
    --mor-koyu: #382978;
    --mor-acik: #d2c8f9;
    --mor-soluk: #f2effe;
    --sari: #feb721;
    --krem: #fff5dd;
    --siyah: #050505;
    --koyu: #0d0d0d;
    --metin: #666666;
    --metin-2: #4d4d4d;
    --metin-3: #686868;
    --beyaz: #fcfcfc;
    --gri-f2: #f2f2f2;
    --gri-e6: #e6e6e6;
    --yer-tutucu: #d9d9d9;
    --gradyan-bolum: linear-gradient(180deg, #ebe6ff 0%, #ded6ff 100%);
    --gradyan-hero: linear-gradient(-149deg, #e0d8ff 0%, #d6ccff 13.7%, #e6dfff 40.4%, #ede9ff 53.1%, #e6dfff 66.8%, #c6b8ff 100%);
    --gradyan-kart: linear-gradient(-163deg, #8a38f5 0%, #b378ff 6.9%, #b6a5ff 26.5%, #b378ff 53%, #6e16e0 100%);
    --golge-mor: 0 3px 7px rgba(113, 88, 213, .05), 0 13px 13px rgba(113, 88, 213, .04), 0 30px 18px rgba(113, 88, 213, .03), 0 53px 21px rgba(113, 88, 213, .01);
    --golge-buton: 0 1px 2px rgba(0, 0, 0, .1), 0 4px 4px rgba(0, 0, 0, .09), 0 9px 6px rgba(0, 0, 0, .05), 0 16px 7px rgba(0, 0, 0, .01);
    --f-baslik: 'Poppins', sans-serif;
    --f-govde: 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--f-govde);
    font-size: 18px;
    line-height: 1.6;
    color: var(--siyah);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4, h5, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kap { width: 100%; max-width: 1200px; margin: 0 auto; }
.bolum { padding: 80px 0; }
.bolum-gradyan { background: var(--gradyan-bolum); }
.gorsel-kutu { background: var(--yer-tutucu) center/cover no-repeat; }

/* ---------- Tipografi ---------- */
.baslik-48 { font-family: var(--f-baslik); font-weight: 600; font-size: 48px; line-height: 1.4; color: var(--siyah); }
.baslik-32 { font-family: var(--f-baslik); font-weight: 600; font-size: 32px; line-height: 1.4; }
.metin-18 { font-size: 18px; line-height: 1.6; color: var(--metin); }
.metin-16 { font-size: 16px; line-height: 1.6; color: var(--metin); }

/* Rozet (badge) */
.rozet {
    display: inline-flex; align-items: center;
    padding: 11px 20px; border-radius: 40px;
    background: var(--mor-acik); color: var(--mor-koyu);
    font-family: var(--f-baslik); font-weight: 500; font-size: 20px; line-height: 20px;
}
.rozet-inter { font-family: var(--f-govde); font-size: 18px; line-height: 18px; padding: 9.5px 16px; }

/* Butonlar */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 17.5px 28px; border-radius: 200px;
    background: var(--mor); color: var(--beyaz);
    font-family: var(--f-govde); font-weight: 500; font-size: 18px; line-height: 18px;
    white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--mor-2); transform: translateY(-1px); }
.btn-kucuk { padding: 13.5px 24px; }
.btn-ok img { width: 18px; height: 18px; }
.btn-ok svg { width: 18px; height: 18px; }

.metin-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500; font-size: 18px; line-height: 1.2; color: #262626;
    border-bottom: 1px solid #787878; padding-bottom: 2px;
}
.metin-link svg { width: 12px; height: 8px; }
.metin-link:hover { color: var(--mor-koyu); border-color: var(--mor-koyu); }

.daire-ok {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 50%; background: var(--sari);
    transition: transform .2s;
}
.daire-ok img { width: 100%; height: 100%; }
.daire-ok:hover { transform: rotate(45deg); }
.daire-ok.mor { background: var(--mor); }

/* Bölüm başlığı satırı */
.bolum-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.bolum-ust .sol { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 570px; }
.bolum-ust .sag-metin { max-width: 488px; }
.bolum-ust.orta { flex-direction: column; align-items: center; text-align: center; }
.bolum-ust.orta .sol { align-items: center; max-width: 760px; }

/* =================== HEADER =================== */
.ust-bar { position: relative; z-index: 20; background: #fff; }
.ust-bar.seffaf { background: transparent; }
.ust-bar .kap { height: 125px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-baslik); font-weight: 500; font-size: 24px; line-height: 1; color: #000; }
.logo img { width: 40px; height: 40px; }
.ana-menu { display: flex; align-items: center; gap: 24px; }
.ana-menu a { font-weight: 500; font-size: 16px; line-height: 1; color: #000; position: relative; padding: 6px 0; }
.ana-menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--mor); transform: scaleX(0); transition: transform .2s; }
.ana-menu a:hover::after, .ana-menu a.aktif::after { transform: scaleX(1); }
.ust-aksiyon { display: flex; align-items: center; gap: 8px; }
.ara-dugme {
    width: 45px; height: 45px; border-radius: 50%; background: var(--mor-koyu);
    display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--golge-buton);
}
.ara-dugme svg { width: 18px; height: 18px; }
.ust-aksiyon .btn { padding: 13.5px 24px; box-shadow: var(--golge-buton); }
.menu-ac { display: none; width: 45px; height: 45px; border-radius: 50%; background: var(--mor-acik); align-items: center; justify-content: center; }
.menu-ac span, .menu-ac span::before, .menu-ac span::after { display: block; width: 18px; height: 2px; background: var(--mor-koyu); border-radius: 2px; position: relative; content: ''; }
.menu-ac span::before { position: absolute; top: -6px; }
.menu-ac span::after { position: absolute; top: 6px; }

/* Arama katmanı */
.arama-katman { position: fixed; inset: 0; z-index: 100; background: rgba(56, 41, 120, .55); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 140px 16px 16px; }
.arama-katman.acik { display: flex; }
.arama-katman form { width: 100%; max-width: 640px; display: flex; gap: 12px; background: var(--beyaz); padding: 8px; border-radius: 200px; box-shadow: var(--golge-mor); }
.arama-katman input { flex: 1; border: 0; outline: 0; background: transparent; padding: 0 20px; font-size: 18px; }

/* =================== SAYFA BAŞLIĞI =================== */
.sayfa-basligi { background: var(--mor); height: 332px; position: relative; overflow: hidden; }
.sayfa-basligi .kap { height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.sayfa-basligi h1 { font-family: var(--f-baslik); font-weight: 600; font-size: 48px; line-height: 1.4; color: var(--beyaz); }
.kirinti { display: flex; gap: 4px; font-family: var(--f-baslik); font-size: 20px; line-height: 1; color: var(--gri-f2); }
.kirinti span:last-child { color: var(--sari); }
.nokta-grubu { position: absolute; width: 48px; height: 48px; }
.nokta-grubu i { position: absolute; width: 21px; height: 21px; border-radius: 50%; }
.nokta-grubu i:nth-child(1) { left: 27px; top: 0; background: var(--mor-koyu); }
.nokta-grubu i:nth-child(2) { left: 0; top: 0; background: var(--mor-acik); opacity: .8; }
.nokta-grubu i:nth-child(3) { left: 27px; top: 27px; background: var(--beyaz); opacity: .6; }
.nokta-grubu.sag-ust { right: 0; top: 0; }
.nokta-grubu.sol-alt { left: 0; bottom: 0; transform: rotate(180deg); }

/* =================== HERO (ana sayfa) =================== */
.hero-alan { background: var(--gradyan-hero) top/100% 864px no-repeat; }
.hero { position: relative; padding-top: 80px; }
.hero-ic { display: flex; justify-content: space-between; min-height: 536px; position: relative; }
.hero-sol { width: 637px; display: flex; flex-direction: column; gap: 44px; position: relative; z-index: 2; }
.hero-sol .ust-blok { display: flex; flex-direction: column; gap: 40px; }
.hero-sol .metinler { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero h1 { font-family: var(--f-baslik); font-weight: 600; font-size: 64px; line-height: 1.4; color: var(--siyah); }
.hero p { color: var(--metin-2); max-width: 610px; margin-top: 4px; }
.hero-dugmeler { display: flex; align-items: center; gap: 12px; }
.btn-ikincil {
    display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 4px 4px 4px 24px;
    border-radius: 200px; background: #dfdfdf; color: #000; font-weight: 500; font-size: 18px; line-height: 1;
    box-shadow: 0 1px 2px rgba(76, 20, 179, .1), 0 3px 3px rgba(76, 20, 179, .09), 0 7px 4px rgba(76, 20, 179, .05);
}
.btn-ikincil .ikon-daire { width: 42px; height: 42px; border-radius: 50%; background: #212121; display: inline-flex; align-items: center; justify-content: center; }
.btn-ikincil .ikon-daire svg { width: 16px; height: 16px; }
.btn-ikincil:hover { background: #d4d4d4; }
.halka-dugme { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #000; padding: 3px; display: inline-flex; }
.halka-dugme span { flex: 1; border-radius: 50%; background: var(--sari); display: flex; align-items: center; justify-content: center; }
.halka-dugme svg { width: 9px; height: 15px; }
.musteri-satir { display: flex; align-items: center; gap: 24px; }
.avatarlar { display: flex; }
.avatarlar span { width: 54px; height: 54px; border-radius: 50%; background: #eee center/cover; border: 2px solid #fff; margin-left: -10px; }
.avatarlar span:first-child { margin-left: 0; }
.musteri-satir strong { display: block; font-weight: 600; font-size: 20px; line-height: 28px; color: var(--sari); }
.musteri-satir small { display: block; font-weight: 500; font-size: 14px; line-height: 22px; color: var(--siyah); }
.hero-gorsel { position: absolute; left: 634px; top: -12px; width: 675px; height: 582px; }
.hero-gorsel .resim { width: 100%; height: 100%; background-color: var(--yer-tutucu); background-position: center; background-size: cover; box-shadow: inset -60px 0 40px -20px rgba(0, 0, 0, .25); }
.hero-gorsel .resim.var { box-shadow: none; background-size: cover; background-repeat: no-repeat; border-radius: 32px; }
.hero-gorsel .golge { position: absolute; left: 288px; top: 514px; width: 367px; height: 43px; border-radius: 50%; background: rgba(47, 47, 47, .24); filter: blur(20px); z-index: -1; }
.hero-gorsel .nokta { position: absolute; border-radius: 50%; }
.hero-gorsel .n1 { left: 442px; top: 35px; width: 26px; height: 26px; background: var(--mor); }
.hero-gorsel .n2 { left: 116px; top: 304px; width: 18px; height: 18px; background: var(--mor); }
.hero-gorsel .n3 { left: 420px; top: 24px; width: 16px; height: 16px; border: 1.4px solid var(--mor); }
.hero-gorsel .n4 { left: 125px; top: 336px; width: 16px; height: 16px; border: 1.4px solid var(--mor); }

.ozellik-kutu {
    margin: 51px 7px 0 6px; position: relative; z-index: 3;
    background: var(--beyaz); border-radius: 32px; padding: 32px; box-shadow: var(--golge-mor);
    display: flex; justify-content: space-between; gap: 32px;
}
.ozellik { display: flex; gap: 20px; }
.ozellik img { width: 44px; height: 44px; flex-shrink: 0; }
.ozellik h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 24px; line-height: 34px; color: var(--koyu); }
.ozellik p { margin-top: 12px; font-weight: 500; font-size: 16px; line-height: 26px; color: #7a7a7a; }

/* =================== KAMPANYA KARTLARI =================== */
.kampanya { padding: 96px 0 80px; }
.kampanya .kap { display: flex; gap: 32px; }
.kampanya-kart { width: 760px; height: 400px; border-radius: 40px; background: linear-gradient(-104deg, #ece7ff 0%, #beb0f4 100%); position: relative; overflow: hidden; flex-shrink: 0; }
.kampanya-kart .resim { position: absolute; left: 64px; top: 17px; width: 278px; height: 383px; background-color: var(--yer-tutucu); background-size: cover; background-position: center; box-shadow: inset 20px 0 20px -10px rgba(0, 0, 0, .35); }
.kampanya-kart .resim.var { box-shadow: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
.kampanya-kart .icerik { position: absolute; left: 395px; top: 47px; width: 319px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.kampanya-kart .ust-yazi { font-family: var(--f-baslik); font-weight: 600; font-size: 20px; line-height: 1; }
.kampanya-kart h2 { font-family: var(--f-baslik); font-weight: 600; font-size: 48px; line-height: 1.4; margin-top: 12px; }
.kampanya-kart p { margin-top: 12px; }
.kampanya-kart .btn { padding: 13.5px 24px; }
.indirim-kart { flex: 1; min-width: 0; height: 400px; border-radius: 40px; background: var(--mor); padding: 32px 34px; display: flex; flex-direction: column; justify-content: space-between; color: var(--beyaz); }
.indirim-kart p { max-width: 319px; color: var(--beyaz); }
.indirim-kart .alt { display: flex; align-items: center; justify-content: space-between; }
.indirim-kart strong { font-family: var(--f-baslik); font-weight: 600; font-size: 56px; line-height: 78px; }
.oynat { width: 64px; height: 64px; border-radius: 50%; background: var(--sari); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
.oynat:hover { transform: scale(1.06); }
.oynat svg { width: 21px; height: 21px; margin-left: 4px; }

/* =================== ÜRÜN KARTI (çentikli) =================== */
.urun-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 20px; }
.urun-kart { position: relative; height: 400px; display: block; }
.urun-kart .sekil {
    position: absolute; inset: 0;
    -webkit-mask: url('../img/maske/kart-urun.svg') center / 100% 100% no-repeat;
    mask: url('../img/maske/kart-urun.svg') center / 100% 100% no-repeat;
    background-color: var(--yer-tutucu); background-size: cover; background-position: center;
}
.urun-kart .sekil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(56, 41, 120, 0) 63.9%, rgba(56, 41, 120, .85) 100%); opacity: 0; transition: opacity .3s; }
.urun-kart .sekil.var::after, .urun-kart:hover .sekil::after { opacity: 1; }
.urun-kart .kucuk-ikon { position: absolute; left: 27px; top: 258px; width: 40px; height: 40px; border-radius: 50%; background: var(--mor); display: flex; align-items: center; justify-content: center; }
.urun-kart .kucuk-ikon img { width: 40px; height: 40px; }
.urun-kart h3 { position: absolute; left: 27px; top: 310px; width: 250px; font-family: var(--f-baslik); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--beyaz); }
.urun-kart .daire-ok { position: absolute; right: 0; bottom: 0; width: 81px; height: 81px; }
.urun-kart .daire-ok img { width: 100%; height: 100%; }
.urun-kart:hover .daire-ok { transform: rotate(45deg); }

/* =================== KATEGORİ (bento) =================== */
.bento { display: grid; grid-template-columns: 396px 280px 460px; grid-template-rows: 335px 335px; gap: 32px; }
.bento-kart { border-radius: 32px; position: relative; overflow: hidden; padding: 32px; }
.bento-kart .icerik { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.bento-kart .ust { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.adet-rozet { background: #fff; border-radius: 40px; padding: 8px 14px; font-weight: 500; font-size: 14px; line-height: 22px; color: #000; }
.adet-rozet b { font-weight: 600; }
.adet-rozet span { color: #7a7a7a; font-size: 12px; }
.bento-kart h3 { font-family: var(--f-baslik); font-weight: 600; font-size: 32px; line-height: 45px; color: #000; }
.bento-kart p { color: #4e4e4e; margin-top: 14px; }
.bento-kart .resim { position: absolute; background-color: var(--yer-tutucu); background-size: cover; background-position: center; z-index: 1; }
.bento-kart .resim.var { background-size: cover; background-repeat: no-repeat; }
.bento-1 .resim.var { top: 0; bottom: 0; right: 0; width: auto; height: auto; left: 330px; }
.bento-2 .resim.var { top: 0; bottom: 0; right: 0; width: auto; height: auto; left: 215px; }
.bento-1 { grid-column: 1 / span 2; background: var(--gri-f2); }
.bento-1 .icerik { width: 236px; }
.bento-1 .resim { left: 377px; top: 16px; width: 377px; height: 368px; background-color: #c9c5c5; }
.bento-2 { background: var(--krem); }
.bento-2 .icerik { width: 174px; }
.bento-2 .resim { left: 165px; top: 30px; width: 306px; height: 298px; background-color: #cfcfcf; z-index: 0; }
.bento-3 { background: var(--gradyan-kart); display: flex; align-items: center; justify-content: center; text-align: center; }
.bento-3 .icerik { align-items: center; gap: 12px; }
.indirim-rozet { background: var(--sari); color: var(--beyaz); border-radius: 40px; padding: 8px 14px; font-weight: 600; font-size: 14px; line-height: 14px; }
.bento-3 strong { font-family: var(--f-baslik); font-weight: 500; font-size: 32px; line-height: 45px; color: #fff; }
.bento-4 { grid-column: 3; grid-row: 1 / span 2; background: var(--mor-soluk); display: flex; flex-direction: column; padding-bottom: 0; }
.bento-4 .icerik { width: 190px; }
.bento-4 .resim { position: relative; flex: 1 0 200px; margin: 24px -32px 0; background-color: #c2bebe; }
.bento-4 .resim.var { background-size: cover; background-position: center top; }

/* =================== NEDEN BİZ =================== */
.neden .kap { display: flex; justify-content: space-between; gap: 40px; }
.neden-sol { width: 503px; display: flex; flex-direction: column; gap: 48px; }
.neden-sol .ust { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.neden-sol .ust .baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.neden-sol .metin-18 { max-width: 488px; }
.isaret-liste { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.isaret-liste li { display: flex; align-items: center; gap: 12px; font-family: var(--f-baslik); font-weight: 500; font-size: 20px; line-height: 28px; }
.isaret-liste img { width: 32px; height: 33px; flex-shrink: 0; }
.isaret-liste.ince li { font-family: var(--f-govde); font-weight: 400; font-size: 18px; }
.dugme-satir { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.neden-sag { width: 610px; height: 568px; position: relative; flex-shrink: 0; }
.neden-sag .buyuk { position: absolute; left: 0; top: 0; width: 610px; height: 334px; border-radius: 32px; background-color: #d3d2d2; }
.neden-sag .kucuk { position: absolute; left: 262px; top: 260px; width: 348px; height: 308px; border-radius: 56px; border: 24px solid #fff; background-color: #d0d0d0; }
.sayac-kutu {
    position: absolute; left: 61px; top: 374px; width: 161px; height: 161px; border-radius: 24px; background: var(--mor);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--beyaz);
    box-shadow: 0 2px 5px rgba(113, 87, 219, .2), 0 9px 9px rgba(113, 87, 219, .17), 0 19px 12px rgba(113, 87, 219, .1), 0 34px 14px rgba(113, 87, 219, .03);
}
.sayac-kutu strong { font-family: var(--f-baslik); font-weight: 600; font-size: 48px; line-height: 48px; }
.sayac-kutu span { font-size: 16px; line-height: 26px; }

/* =================== HİZMET KARTLARI =================== */
.hizmet-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hizmet-kart { background: var(--mor-acik); border-radius: 32px; padding: 24px; display: flex; flex-direction: column; gap: 24px; transition: background .3s; }
.hizmet-kart h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 32px; line-height: 45px; color: var(--mor-koyu); transition: color .3s; }
.hizmet-kart p { color: var(--mor-koyu); margin-top: 12px; transition: color .3s; }
.hizmet-kart .resim { height: 264px; border-radius: 24px; position: relative; background-color: #c8c4c4; margin-top: auto; }
.hizmet-kart .daire-ok { position: absolute; right: 16px; bottom: 16px; }
.hizmet-kart.vurgu, .hizmet-izgara:hover .hizmet-kart:hover { background: var(--beyaz); }
.hizmet-kart.vurgu h3, .hizmet-izgara:hover .hizmet-kart:hover h3 { color: var(--siyah); }
.hizmet-kart.vurgu p, .hizmet-izgara:hover .hizmet-kart:hover p { color: var(--metin); }
.hizmet-kart.vurgu .daire-ok, .hizmet-izgara:hover .hizmet-kart:hover .daire-ok { background: var(--mor); }
.hizmet-izgara:hover .hizmet-kart.vurgu:not(:hover) { background: var(--mor-acik); }
.hizmet-izgara:hover .hizmet-kart.vurgu:not(:hover) h3, .hizmet-izgara:hover .hizmet-kart.vurgu:not(:hover) p { color: var(--mor-koyu); }
.hizmet-izgara:hover .hizmet-kart.vurgu:not(:hover) .daire-ok { background: var(--sari); }
.bolum:not(.bolum-gradyan) .hizmet-kart.vurgu { background: var(--mor-acik); }
.bolum:not(.bolum-gradyan) .hizmet-kart.vurgu h3, .bolum:not(.bolum-gradyan) .hizmet-kart.vurgu p { color: var(--mor-koyu); }

/* =================== EKİP =================== */
.ekip-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ekip-kart { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.ekip-kart .resim { width: 100%; height: 392px; border-radius: 32px; background-color: #cdcdcd; position: relative; overflow: hidden; }
.bolum-gradyan .ekip-kart .resim { background-color: #f5f3f3; }
.ekip-sosyal { position: absolute; left: 50%; bottom: 32px; transform: translate(-50%, 20px); display: flex; gap: 11px; opacity: 0; transition: .3s; }
.ekip-kart:first-child .ekip-sosyal, .ekip-kart:hover .ekip-sosyal { opacity: 1; transform: translate(-50%, 0); }
.ekip-sosyal a { width: 55px; height: 55px; border-radius: 50%; background: var(--sari); display: flex; align-items: center; justify-content: center; }
.ekip-sosyal img { width: 100%; height: 100%; }
.ekip-kart h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 28px; line-height: 39px; }
.ekip-kart span { display: block; margin-top: 12px; font-family: var(--f-baslik); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--metin); }

/* =================== YORUMLAR =================== */
.yorum-pencere { overflow: hidden; }
.yorum-serit { display: flex; gap: 24px; transition: transform .5s ease; }
.yorum-kart { flex: 0 0 calc((100% - 48px) / 3); position: relative; padding-top: 24px; }
.yorum-kart .govde {
    border-radius: 24px; border: 1.2px solid var(--mor); background: var(--gradyan-bolum);
    padding: 37px 26px 24px; height: 240px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color .2s;
}
.yorum-kart:hover .govde { border-color: var(--siyah); }
.yorum-kart .tirnak { position: absolute; left: 34px; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--mor); display: flex; align-items: center; justify-content: center; }
.yorum-kart .tirnak img { width: 100%; height: 100%; }
.yorum-kart p { font-size: 16px; line-height: 26px; color: var(--mor-koyu); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yorum-alt { border-top: 1px solid var(--mor); padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yorum-kisi { display: flex; align-items: center; gap: 12px; }
.yorum-kisi .avatar { width: 48px; height: 48px; border-radius: 50%; background: #f8f8f8 center/cover; flex-shrink: 0; }
.yorum-kisi b { display: block; font-weight: 500; font-size: 18px; line-height: 18px; color: var(--mor-koyu); }
.yorum-kisi small { display: block; margin-top: 4px; font-weight: 500; font-size: 14px; line-height: 22px; color: var(--mor-koyu); }
.yildizlar { display: flex; gap: 0; color: var(--sari); font-size: 16px; letter-spacing: 0; line-height: 1; }
.yildizlar .bos { color: #e3e3e3; }
.noktalar { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.noktalar button { width: 20px; height: 20px; border-radius: 50%; background: #ccc; transition: background .2s; }
.noktalar button.aktif { background: var(--mor-koyu); }

/* =================== BÜLTEN =================== */
.bulten { padding: 96px 10px; text-align: center; }
.bulten .bolum-ust { margin-bottom: 40px; }
.bulten-form { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bulten-giris { width: 345px; height: 56px; border-radius: 200px; background: var(--gri-f2); border: 1px solid var(--gri-e6); display: flex; align-items: center; gap: 12px; padding: 8px; }
.bulten-giris .ikon { width: 40px; height: 40px; border-radius: 50%; background: var(--sari); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bulten-giris .ikon img { width: 100%; height: 100%; }
.bulten-giris input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; color: var(--siyah); }
.bulten-giris input::placeholder { color: var(--siyah); }
.bulten-form .btn { height: 56px; }

/* =================== FOOTER =================== */
.alt-bilgi { background: var(--mor); color: var(--beyaz); padding: 80px 0; }
.alt-ust { display: flex; justify-content: space-between; gap: 64px; }
.alt-marka { width: 387px; display: flex; flex-direction: column; gap: 32px; }
.alt-marka .logo { color: var(--beyaz); font-weight: 600; font-size: 32px; gap: 8px; }
.alt-marka .logo img { width: 48px; height: 48px; }
.alt-marka p { color: var(--gri-f2); }
.sosyal { display: flex; gap: 14px; margin-top: 4px; }
.sosyal a { width: 48px; height: 48px; border-radius: 50%; background: var(--sari); display: flex; align-items: center; justify-content: center; transition: transform .2s; box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .09), 0 6px 3px rgba(0, 0, 0, .05); }
.sosyal a:hover { transform: translateY(-3px); }
.sosyal img { width: 100%; height: 100%; }
.alt-menuler { display: flex; gap: 69px; }
.alt-sutunlar { display: flex; gap: 56px; }
.alt-menuler h4 { font-family: var(--f-baslik); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--beyaz); margin-bottom: 24px; }
.alt-menuler ul { display: flex; flex-direction: column; gap: 16px; }
.alt-menuler a { font-size: 16px; line-height: 26px; color: var(--gri-f2); }
.alt-menuler a:hover { color: #fff; text-decoration: underline; }
.alt-abone { width: 305px; }
.alt-abone form { height: 54px; border-radius: 32px; background: var(--gri-f2); display: flex; align-items: center; padding: 6px 6px 6px 20px; gap: 10px; }
.alt-abone input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 500; font-size: 14px; color: var(--siyah); }
.alt-abone input::placeholder { color: #ccc; }
.alt-abone button { width: 42px; height: 42px; border-radius: 50%; background: var(--sari); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alt-abone button svg { width: 15px; height: 15px; }
.alt-abone .bildirim { margin-top: 10px; font-size: 14px; }
.alt-cizgi { border: 0; border-top: 1px solid var(--mor-koyu); margin: 64px 0 32px; }
.telif { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-weight: 500; font-size: 14px; line-height: 22px; }
.telif div { display: flex; align-items: center; gap: 10px; }
.telif i { width: 1px; height: 10px; background: rgba(252, 252, 252, .5); }

/* =================== HAKKIMIZDA =================== */
.hakkinda .kap { display: flex; justify-content: space-between; gap: 40px; }
.hakkinda-sol { width: 462px; display: flex; flex-direction: column; gap: 78px; }
.hakkinda-sol .ust { display: flex; flex-direction: column; gap: 48px; }
.hakkinda-sol .baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hakkinda-sol .metin-18 { color: var(--metin-3); margin-top: 24px; }
.nasil-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: 18px; }
.nasil-link .daire-ok { width: 53px; height: 53px; }
.nasil-link .daire-ok img { width: 100%; height: 100%; }
.yil-satir { border-top: 1px solid #cfcfcf; padding-top: 32px; display: flex; align-items: center; gap: 28px; }
.yil-satir strong { font-family: var(--f-baslik); font-weight: 600; font-size: 40px; line-height: 56px; color: var(--mor); }
.yil-satir p { color: #333; }
.hakkinda-sag { width: 646px; height: 568px; position: relative; flex-shrink: 0; }
.koyu-kartlar { position: absolute; left: 0; top: 0; width: 156px; display: flex; flex-direction: column; gap: 16px; }
.koyu-kart { height: 179px; border-radius: 32px; background: var(--mor-koyu); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.koyu-kart img { width: 32px; height: 32px; }
.koyu-kart span { font-weight: 500; font-size: 16px; line-height: 22px; max-width: 110px; }
.hakkinda-resim {
    position: absolute; left: 172px; top: 0; width: 474px; height: 568px; background-color: var(--yer-tutucu); background-size: cover; background-position: center;
    -webkit-mask: url('../img/maske/hakkimizda-gorsel.svg') center / 100% 100% no-repeat; mask: url('../img/maske/hakkimizda-gorsel.svg') center / 100% 100% no-repeat;
}
.video-dugme { position: absolute; left: 491px; top: 0; width: 155px; height: 155px; border-radius: 50%; background: var(--sari); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.video-dugme:hover { transform: scale(1.05); }
.video-dugme svg { width: 72px; height: 72px; }

/* Kurucu */
.kurucu .kap { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.kurucu-kolaj { width: 548px; height: 509px; position: relative; flex-shrink: 0; }
.kurucu-kolaj .parca { position: absolute; }
.kurucu-kolaj .parca .zemin { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.kurucu-kolaj .parca .foto { position: absolute; background-color: var(--yer-tutucu); background-size: cover; background-position: center; }
.kurucu-kolaj .p1 { left: 55px; top: 33px; width: 239px; height: 260px; }
.kurucu-kolaj .p1 .zemin { background: linear-gradient(180deg, rgba(255, 245, 221, .6) 34.8%, rgba(254, 183, 33, .28) 100%); -webkit-mask-image: url('../img/maske/kurucu-3.svg'); mask-image: url('../img/maske/kurucu-3.svg'); }
.kurucu-kolaj .p1 .foto { left: 20px; top: 36px; width: 209px; height: 224px; }
.kurucu-kolaj .p2 { left: 308px; top: 100px; width: 240px; height: 238px; }
.kurucu-kolaj .p2 .zemin { background: linear-gradient(180deg, rgba(242, 239, 254, .9) 22.5%, rgba(182, 166, 247, .4) 78%); -webkit-mask-image: url('../img/maske/kurucu-2.svg'); mask-image: url('../img/maske/kurucu-2.svg'); }
.kurucu-kolaj .p2 .foto { left: 32px; top: 10px; width: 176px; height: 237px; background-color: #cfc9c9; }
.kurucu-kolaj .p3 { left: 15px; top: 308px; width: 319px; height: 201px; }
.kurucu-kolaj .p3 .zemin { background: linear-gradient(180deg, rgba(210, 200, 249, .9) 47.1%, rgba(150, 129, 231, .5) 100%); -webkit-mask-image: url('../img/maske/kurucu-1.svg'); mask-image: url('../img/maske/kurucu-1.svg'); }
.kurucu-kolaj .p3 .foto { left: 53px; top: 0; width: 175px; height: 201px; background-color: #e9e7e7; }
.kurucu-kolaj .ok-daire { position: absolute; left: 243px; top: 0; width: 84px; height: 84px; border-radius: 50%; background: var(--krem); display: flex; align-items: center; justify-content: center; }
.kurucu-kolaj .ok-daire img { width: 48px; height: 48px; }
.kurucu-kolaj .halkalar { position: absolute; left: 219px; top: 299px; width: 121px; height: 56px; border-radius: 34px; background: var(--mor-acik); display: flex; align-items: center; justify-content: center; }
.kurucu-kolaj .halkalar i { width: 31px; height: 31px; border-radius: 50%; border: 1.2px solid #fff; margin-left: -15px; }
.kurucu-kolaj .halkalar i:first-child { margin-left: 0; }
.kurucu-kolaj .susler i { position: absolute; border-radius: 50%; }
.kurucu-kolaj .s1 { left: 421px; top: 408px; width: 34px; height: 34px; background: var(--krem); }
.kurucu-kolaj .s2 { left: 459px; top: 42px; width: 25px; height: 25px; background: var(--mor-soluk); }
.kurucu-kolaj .parilti { position: absolute; width: 30px; height: 30px; opacity: .35; }
.kurucu-kolaj .pr1 { left: 0; top: 240px; }
.kurucu-kolaj .pr2 { left: 364px; top: 361px; }
.kurucu-sag { width: 524px; display: flex; flex-direction: column; gap: 34px; }
.kurucu-sag .tirnak-daire { width: 50px; height: 50px; border-radius: 50%; background: var(--mor); display: flex; align-items: center; justify-content: center; }
.kurucu-sag .tirnak-daire img { width: 100%; height: 100%; }
.kurucu-sag blockquote { margin: 24px 0 0; font-family: var(--f-baslik); font-weight: 500; font-style: italic; font-size: 24px; line-height: 38px; color: var(--metin-2); }
.kurucu-sag .kisi { margin-top: 32px; }
.kurucu-sag .kisi b { display: block; font-family: var(--f-baslik); font-weight: 500; font-size: 20px; line-height: 28px; }
.kurucu-sag .kisi span { display: block; margin-top: 4px; font-size: 16px; line-height: 26px; color: var(--metin); }

/* Logolar */
.logolar { background: var(--gradyan-bolum); padding: 80px 0; }
.logolar .kap { display: flex; justify-content: space-between; gap: 24px; }
.logo-daire { width: 209px; height: 209px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 1; transition: transform .2s, border-color .2s; }
.logo-daire:hover { transform: translateY(-4px); border-color: var(--mor); }
.logo-daire img { max-width: 110px; max-height: 80px; }

/* Misyon */
.misyon-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 39px; }
.misyon-kart { border-radius: 32px; background: var(--gradyan-bolum); padding: 24px; height: 213px; display: flex; flex-direction: column; color: var(--mor-koyu); transition: transform .2s; }
.misyon-kart:hover { transform: translateY(-4px); }
.misyon-kart strong { font-family: var(--f-baslik); font-weight: 600; font-size: 48px; line-height: 67px; }
.misyon-kart hr { border: 0; border-top: 1px solid #999; margin: 20px 0; width: 100%; }
.misyon-kart p { max-width: 230px; color: var(--mor-koyu); }

/* Uzmanlık */
.uzmanlik .kap { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.uzmanlik-sol { width: 554px; height: 563px; position: relative; flex-shrink: 0; }
.uzmanlik-sol .resim {
    position: absolute; inset: 0; background-color: var(--yer-tutucu); background-size: cover; background-position: center;
    -webkit-mask: url('../img/maske/uzman-gorsel.svg') center / 100% 100% no-repeat; mask: url('../img/maske/uzman-gorsel.svg') center / 100% 100% no-repeat;
}
.yil-rozet {
    position: absolute; left: 335px; top: 476px; width: 219px; height: 87px; border-radius: 27px; background: var(--sari);
    display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--beyaz);
    box-shadow: 0 3px 6px rgba(229, 163, 21, .28), 0 12px 12px rgba(229, 163, 21, .25), 0 26px 16px rgba(229, 163, 21, .14), 0 47px 19px rgba(229, 163, 21, .04);
}
.yil-rozet strong { font-family: var(--f-baslik); font-weight: 600; font-size: 44px; line-height: 62px; }
.yil-rozet span { font-weight: 500; font-size: 17px; line-height: 19px; }
.uzmanlik-sag { width: 508px; display: flex; flex-direction: column; gap: 47px; }
.uzmanlik-sag .baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.uzmanlik-sag .metin-18 { color: var(--metin-3); margin-top: 24px; }
.ilerleme-liste { display: flex; flex-direction: column; gap: 20px; }
.ilerleme-ust { display: flex; justify-content: space-between; font-weight: 500; font-size: 18px; line-height: 29px; margin-bottom: 14px; }
.ilerleme-ust span:last-child { color: var(--mor-koyu); }
.ilerleme { height: 23px; border-radius: 15px; background: var(--gri-e6); overflow: hidden; }
.ilerleme span { display: block; height: 100%; background: var(--mor); width: 0; transition: width 1.2s ease; }

/* Şubeler */
.subeler .kap { display: flex; justify-content: space-between; gap: 65px; }
.sube-harita { flex: 0 0 712px; height: 537px; border-radius: 32px; overflow: hidden; background-color: #b9b9b9; background-size: cover; background-position: center; }
.sube-harita iframe { width: 100%; height: 100%; border: 0; display: block; }
.sube-sag { width: 423px; padding-top: 9px; display: flex; flex-direction: column; gap: 24px; }
.sube-liste { background: var(--beyaz); border: 1px solid var(--gri-e6); border-radius: 32px; padding: 40px; }
.sube-oge { border-bottom: 1px solid #ddd; padding: 12px 0; }
.sube-oge:first-child { padding-top: 0; }
.sube-oge button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; font-family: var(--f-baslik); font-weight: 500; font-size: 24px; line-height: 34px; }
.sube-oge .ok { width: 48px; height: 48px; border-radius: 50%; background: var(--mor-acik); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .2s; }
.sube-oge .ok svg { width: 18px; height: 18px; color: var(--mor-koyu); transition: transform .2s; }
.sube-oge.acik .ok { background: var(--mor-koyu); }
.sube-oge.acik .ok svg { color: #fff; transform: rotate(90deg); }
.sube-oge .detay { display: none; font-size: 16px; line-height: 26px; color: var(--metin); padding: 0 56px 4px 0; margin-top: -6px; }
.sube-oge.acik .detay { display: block; }

/* =================== NASIL ÇALIŞIR =================== */
.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 21px; }
.adim { text-align: center; position: relative; }
.adim .daireler { width: 176px; height: 140px; margin: 0 auto 24px; position: relative; left: 18px; }
.adim .buyuk-daire { width: 140px; height: 140px; border-radius: 50%; background: var(--mor); display: flex; align-items: center; justify-content: center; }
.adim .buyuk-daire img { width: 72px; height: 72px; }
.adim .numara { position: absolute; left: 104px; top: 34px; width: 72px; height: 72px; border-radius: 50%; background: var(--sari); border: 6px solid #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-baslik); font-weight: 600; font-size: 32px; line-height: 1; color: var(--siyah); box-sizing: content-box; margin: -6px; }
.adim:not(:last-child)::after { content: ''; position: absolute; top: 70px; right: -55px; width: 89px; height: 1px; background: #8a8a8a; }
.adim h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 28px; line-height: 39px; }
.adim p { margin-top: 8px; text-align: center; }

/* =================== SSS =================== */
.sss-liste { display: flex; flex-direction: column; gap: 24px; }
.sss-oge { border-radius: 24px; background: var(--beyaz); border: 1px solid #ededed; transition: background .25s; }
.sss-oge button { width: 100%; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; font-family: var(--f-baslik); font-weight: 500; font-size: 24px; line-height: 34px; color: var(--siyah); }
.sss-oge .isaret { width: 34px; height: 34px; position: relative; flex-shrink: 0; }
.sss-oge .isaret::before, .sss-oge .isaret::after { content: ''; position: absolute; left: 7px; right: 7px; top: 16px; height: 2.4px; border-radius: 2px; background: currentColor; transition: transform .25s; }
.sss-oge .isaret::after { transform: rotate(90deg); }
.sss-oge .cevap { display: none; padding: 0 24px 28px; max-width: 818px; color: var(--gri-f2); margin-top: -4px; }
.sss-oge.acik { background: var(--mor); border-color: var(--mor); }
.sss-oge.acik button { color: var(--beyaz); padding-bottom: 24px; }
.sss-oge.acik .isaret::after { transform: rotate(0); }
.sss-oge.acik .isaret { color: var(--sari); }
.sss-oge.acik .cevap { display: block; }

/* =================== HİZMET DETAY =================== */
.detay-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 64px; }
.detay-ust .sol { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; }
.detay-ust .sol .metin-18 { margin-top: 12px; }
.detay-govde { display: flex; gap: 82px; align-items: center; }
.detay-govde .resim { flex: 0 0 610px; height: 497px; border-radius: 32px; }
.detay-icerik { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.detay-icerik h2 { font-family: var(--f-baslik); font-weight: 600; font-size: 32px; line-height: 45px; }
.detay-icerik h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 24px; line-height: 34px; margin-bottom: 20px; }
.detay-icerik .metin-18 { margin-top: 24px; white-space: pre-line; }
.detay-icerik .isaret-liste { gap: 8px; margin: 0; }

/* =================== ÜRÜN DETAY =================== */
.urun-bilgi .kap { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.urun-bilgi .resim { flex: 0 0 590px; height: 580px; border-radius: 32px; }
.urun-bilgi .sag { width: 488px; display: flex; flex-direction: column; gap: 32px; }
.urun-bilgi .baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ikon-liste { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.ikon-liste span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; line-height: 22px; color: #999; }
.ikon-liste img { width: 18px; height: 18px; opacity: .55; }
.ikon-liste i { width: 1px; height: 12px; background: #999; }
.urun-bilgi .metin-18 { margin-top: 16px; }
.puan-satir { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: 16px; }
.puan-satir .yildizlar { font-size: 19px; gap: 5px; margin-left: 9px; }
.puan-satir a { color: var(--mor); font-weight: 400; }
.fiyat-blok { margin-top: 20px; }
.fiyat-blok strong { display: block; font-family: var(--f-baslik); font-weight: 600; font-size: 40px; line-height: 56px; }
.fiyat-blok small { display: block; font-size: 12px; line-height: 17px; color: var(--metin); margin-top: 4px; }

/* Geri sayım */
.geri-sayim { display: flex; gap: 24px; }
.geri-sayim > div { width: 100px; text-align: center; }
.geri-sayim strong { width: 100px; height: 100px; border-radius: 50%; background: var(--beyaz); display: flex; align-items: center; justify-content: center; font-family: var(--f-baslik); font-weight: 600; font-size: 32px; color: var(--mor); }
.geri-sayim > div:first-child strong { background: var(--mor); color: var(--beyaz); }
.geri-sayim span { display: block; margin-top: 12px; color: var(--metin); }

/* İndirim bölümü */
.indirim .kap { display: flex; align-items: center; gap: 80px; }
.indirim-sol { width: 560px; height: 484px; position: relative; flex-shrink: 0; }
.indirim-sol .resim {
    position: absolute; left: 0; top: 0; width: 407px; height: 484px; background-color: #9c9c9c; background-size: cover; background-position: center;
    -webkit-mask: url('../img/maske/indirim-sekil.svg') center / 100% 100% no-repeat; mask: url('../img/maske/indirim-sekil.svg') center / 100% 100% no-repeat;
}
.indirim-daire { position: absolute; left: 254px; top: 89px; width: 306px; height: 306px; border-radius: 50%; background: var(--sari); font-family: var(--f-baslik); font-weight: 700; font-style: italic; color: #fff; }
.indirim-daire .upto { position: absolute; left: 63px; top: 43px; width: 179px; text-align: center; font-size: 39px; line-height: 54px; }
.indirim-daire .upto::before, .indirim-daire .upto::after { content: ''; position: absolute; top: 34px; width: 30px; border-top: 1.5px dashed #fff; }
.indirim-daire .upto::before { left: 0; }
.indirim-daire .upto::after { right: 0; }
.indirim-daire .oran { position: absolute; left: 45px; top: 86px; font-size: 95px; line-height: 114px; color: var(--mor-2); text-shadow: 2px 2px 8px rgba(154, 131, 247, .38); letter-spacing: -2px; }
.indirim-daire .off { position: absolute; left: 40px; top: 196px; font-size: 52px; line-height: 64px; }
.indirim-sag { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; }
.indirim-sag h2 { font-family: var(--f-govde); font-weight: 600; font-size: 48px; line-height: 67px; color: #2a2a2a; }
.btn-beyaz { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 4px 4px 4px 32px; border-radius: 200px; background: var(--beyaz); color: #999; font-weight: 500; font-size: 18px; line-height: 1; transition: color .2s; }
.btn-beyaz:hover { color: var(--mor-koyu); }
.btn-beyaz span { width: 56px; height: 56px; border-radius: 50%; background: var(--mor); display: flex; align-items: center; justify-content: center; }
.btn-beyaz svg { width: 18px; height: 18px; }

/* =================== FİYATLAR =================== */
.fiyat-izgara { display: grid; grid-template-columns: repeat(3, 352px); justify-content: center; gap: 32px; }
.fiyat-kart { border-radius: 32px; background: var(--gradyan-bolum); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 493px; transition: transform .25s, box-shadow .25s; }
.fiyat-kart:hover, .fiyat-kart.vurgu { transform: translateY(-6px); box-shadow: var(--golge-mor); }
.fiyat-kart h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 24px; line-height: 34px; text-align: center; }
.fiyat-tutar { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 24px 0 32px; font-family: var(--f-baslik); }
.fiyat-tutar .simge { font-weight: 500; font-size: 24px; line-height: 34px; color: var(--mor-2); }
.fiyat-tutar strong { font-weight: 600; font-size: 56px; line-height: 70px; color: var(--mor-2); }
.fiyat-tutar .donem { font-weight: 500; font-size: 24px; line-height: 34px; color: var(--siyah); }
.fiyat-kart ul { display: flex; flex-direction: column; gap: 12px; }
.fiyat-kart li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 26px; }
.fiyat-kart li img { width: 32px; height: 33px; flex-shrink: 0; }
.fiyat-kart .btn { width: 100%; border-radius: 12px; padding: 13.5px 16px; }

/* =================== İLETİŞİM =================== */
.iletisim .kap { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.iletisim-sol { width: 692px; }
.iletisim-sol .baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 53px; }
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-alan { display: flex; flex-direction: column; gap: 15px; }
.form-alan.tam { grid-column: 1 / -1; }
.form-alan label { font-family: var(--f-baslik); font-weight: 500; font-size: 20px; line-height: 28px; }
.form-alan input, .form-alan select, .form-alan textarea {
    height: 54px; border-radius: 32px; background: #fbfbfb; border: 1px solid #e2e2e2; padding: 0 16px;
    font-size: 16px; color: var(--siyah); outline: 0; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.form-alan textarea { height: 229px; padding: 16px; resize: vertical; }
.form-alan select { appearance: none; -webkit-appearance: none; background: #fbfbfb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23666' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") right 24px center no-repeat; padding-right: 48px; }
.form-alan select:invalid { color: #ccc; }
.form-alan input::placeholder, .form-alan textarea::placeholder { color: #ccc; font-weight: 500; font-size: 14px; }
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus { border-color: var(--mor); box-shadow: 0 0 0 4px rgba(154, 131, 247, .15); }
.form-hata { color: #d93636; font-size: 14px; line-height: 1.4; margin-top: -6px; }
.iletisim-sol .btn { margin-top: 40px; }
.uyari { border-radius: 20px; padding: 14px 20px; font-size: 16px; margin-bottom: 24px; }
.uyari.basari { background: #e8f8ec; color: #1d6b33; border: 1px solid #bfe8ca; }
.uyari.hata { background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; }
.iletisim-kart { width: 476px; margin-top: 149px; border-radius: 32px; background: var(--mor); padding: 48px; color: var(--beyaz); display: flex; flex-direction: column; gap: 49px; }
.iletisim-kart h3 { font-family: var(--f-baslik); font-weight: 500; font-size: 28px; line-height: 39px; margin-bottom: 14px; }
.iletisim-kart p { color: var(--beyaz); }
.iletisim-kart a:hover { text-decoration: underline; }
.iletisim-kart .sosyal { gap: 18px; margin-top: 16px; }
.iletisim-kart .sosyal a { width: 60px; height: 60px; }


/* Arama sonuçları */
.arama-sonuc { display: grid; gap: 16px; }
.arama-sonuc a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 24px; background: var(--mor-soluk); transition: background .2s; }
.arama-sonuc a:hover { background: var(--mor-acik); }
.arama-sonuc b { font-family: var(--f-baslik); font-weight: 500; font-size: 22px; }

/* Görünür olunca beliren animasyon */
.belir { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.belir.gorundu { opacity: 1; transform: none; }

/* =================== DUYARLI =================== */
@media (max-width: 1260px) {
    .kap { padding: 0 24px; }
    .hero-gorsel { left: auto; right: -40px; width: 52%; }
    .hero-sol { width: 52%; }
    .hero h1 { font-size: 54px; }
    .kampanya-kart { width: auto; flex: 1.86; }
    .kampanya-kart .icerik { left: auto; right: 32px; width: 300px; }
    .kampanya-kart .resim { left: 32px; }
    .bento { grid-template-columns: 1.4fr 1fr 1.6fr; }
    .neden-sag { width: 520px; transform-origin: right top; }
    .neden-sag .buyuk { width: 520px; }
    .neden-sag .kucuk { left: 172px; }
    .hakkinda-sag { width: 560px; }
    .hakkinda-resim { width: 388px; }
    .video-dugme { left: 420px; width: 140px; height: 140px; }
    .uzmanlik-sol { width: 480px; height: 488px; }
    .yil-rozet { left: auto; right: 0; top: auto; bottom: 0; }
    .sube-harita { flex-basis: 58%; }
    .detay-govde .resim { flex-basis: 50%; }
    .urun-bilgi .resim { flex-basis: 50%; }
    .fiyat-izgara { grid-template-columns: repeat(3, 1fr); }
    .logo-daire { width: 180px; height: 180px; }
}

@media (max-width: 1024px) {
    .ana-menu { display: none; position: absolute; top: 100%; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-radius: 24px; padding: 12px; box-shadow: var(--golge-mor); }
    .ana-menu.acik { display: flex; }
    .ana-menu a { padding: 14px 16px; border-radius: 14px; }
    .ana-menu a::after { display: none; }
    .ana-menu a:hover, .ana-menu a.aktif { background: var(--mor-soluk); }
    .menu-ac { display: inline-flex; }
    .ust-bar .kap { height: 96px; position: relative; }

    .hero-ic { flex-direction: column; min-height: 0; }
    .hero-sol { width: 100%; }
    .hero-gorsel { position: relative; left: 0; right: 0; top: 0; width: 100%; height: 420px; margin-top: 40px; }
    .hero-gorsel .golge, .hero-gorsel .nokta { display: none; }
    .hero-alan { background-size: 100% 100%; }
    .ozellik-kutu { display: grid; grid-template-columns: 1fr 1fr; margin: 40px 0 0; }

    .kampanya .kap { flex-direction: column; }
    .kampanya-kart, .indirim-kart { width: 100%; flex: none; }

    .urun-izgara, .hizmet-izgara, .ekip-izgara, .misyon-izgara { grid-template-columns: repeat(2, 1fr); }
    .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .bento-1 { grid-column: 1 / -1; min-height: 335px; }
    .bento-4 { grid-column: 1 / -1; grid-row: auto; min-height: 560px; }
    .bento-2, .bento-3 { min-height: 335px; }

    .neden .kap, .hakkinda .kap, .kurucu .kap, .uzmanlik .kap, .subeler .kap, .urun-bilgi .kap, .indirim .kap, .iletisim .kap { flex-direction: column; align-items: stretch; }
    .neden-sol, .hakkinda-sol, .kurucu-sag, .uzmanlik-sag, .sube-sag, .urun-bilgi .sag, .iletisim-sol, .iletisim-kart { width: 100%; }
    .neden-sag, .hakkinda-sag, .kurucu-kolaj, .uzmanlik-sol, .indirim-sol { margin: 0 auto; }
    .iletisim-kart { margin-top: 0; }
    .sube-harita { flex-basis: auto; height: 420px; }
    .detay-govde { flex-direction: column; align-items: stretch; gap: 40px; }
    .detay-govde .resim, .urun-bilgi .resim { flex-basis: auto; height: 420px; }
    .adimlar { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
    .adim::after { display: none; }
    .fiyat-izgara { grid-template-columns: 1fr 1fr; }
    .logolar .kap { flex-wrap: wrap; justify-content: center; }
    .alt-ust { flex-direction: column; gap: 48px; }
    .alt-marka { width: 100%; }
    .alt-menuler { flex-wrap: wrap; gap: 48px; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .bolum { padding: 56px 0; }
    .kap { padding: 0 16px; }
    .baslik-48, .sayfa-basligi h1 { font-size: 32px; }
    .baslik-32 { font-size: 26px; }
    .metin-18 { font-size: 16px; }
    .rozet { font-size: 16px; line-height: 16px; padding: 10px 16px; }
    .bolum-ust, .detay-ust { flex-direction: column; align-items: flex-start; margin-bottom: 40px; gap: 24px; }
    .bolum-ust.orta { align-items: center; }
    .sayfa-basligi { height: 240px; }
    .kirinti { font-size: 16px; }
    .ust-aksiyon .btn { display: none; }
    .logo { font-size: 22px; }

    .hero h1 { font-size: 38px; }
    .hero-dugmeler { flex-wrap: wrap; }
    .hero-gorsel { height: 300px; }
    .ozellik-kutu { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
    .ozellik h3 { font-size: 20px; line-height: 28px; }

    .kampanya { padding: 56px 0; }
    .kampanya-kart { height: auto; padding: 32px 24px; }
    .kampanya-kart .resim { display: none; }
    .kampanya-kart .icerik { position: static; width: 100%; }
    .kampanya-kart h2 { font-size: 34px; }
    .indirim-kart { height: 300px; }

    .urun-izgara, .hizmet-izgara, .ekip-izgara, .misyon-izgara, .fiyat-izgara { grid-template-columns: 1fr; }
    .urun-kart { max-width: 387px; width: 100%; margin: 0 auto; }
    .bento { grid-template-columns: 1fr; }
    .bento-1, .bento-4 { grid-column: auto; }
    .bento-1 .resim { display: none; }
    .bento-2 .resim { opacity: .25; }

    .neden-sag, .hakkinda-sag, .kurucu-kolaj, .uzmanlik-sol, .indirim-sol { transform: scale(.58); transform-origin: left top; margin-bottom: -40%; }
    .neden-sag { margin-bottom: -238px; }
    .hakkinda-sag { margin-bottom: -238px; }
    .kurucu-kolaj { margin-bottom: -214px; }
    .uzmanlik-sol { margin-bottom: -205px; }
    .indirim-sol { margin-bottom: -203px; }
    .indirim-sag h2 { font-size: 32px; line-height: 44px; }

    .yorum-kart { flex-basis: 100%; }
    .adimlar { grid-template-columns: 1fr; }
    .sss-oge button { font-size: 18px; line-height: 26px; padding: 20px; }
    .sss-oge .cevap { padding: 0 20px 20px; }
    .sube-liste { padding: 24px; }
    .sube-oge button { font-size: 20px; }
    .geri-sayim { gap: 12px; }
    .geri-sayim > div, .geri-sayim strong { width: 80px; }
    .geri-sayim strong { height: 80px; font-size: 26px; }
    .form-izgara { grid-template-columns: 1fr; }
    .iletisim-kart { padding: 32px 24px; }
    .logo-daire { width: 140px; height: 140px; }
    .logo-daire img { max-width: 80px; }
    .alt-sutunlar { gap: 40px; }
    .alt-abone { width: 100%; }
    .telif { flex-direction: column; }
}