/* ===========================================================================
BAKIRKÖY KUYUMCUSU — ORTAK TEMA
---------------------------------------------------------------------------
Sitedeki bütün sayfalar bu dosyadan beslenir. Bir rengi, bir gölgeyi ya da
kartların hissini değiştirmek istediğinde burayı değiştir; tüm sayfalar
birden değişir. Sayfaların kendi içine renk yazmayın.
Renkler logodan ölçüldü (bakır zemin #E98062 → #CF6146 → #9C3B28).
TEK YÜZEY
Tüm sayfalar krem/bakır yüzeyi kullanır:
KULLANIM ÖZETİ
...
tema.js'i de ekle: dokunma ışığı ve dalga efekti oradan gelir.
========================================================================= */
/* --- 1. Belirteçler ------------------------------------------------------ */
:root{
/* Marka */
--bk-bakir:#C25A40;
--bk-bakir-koyu:#9C3B28;
--bk-bakir-acik:#E98062;
--bk-altin:#C9962F;
--bk-altin-acik:#F0C87A;
/* Yüzey ve yazı (krem) */
--bk-kagit:#FAF3EC;
--bk-murekkep:#2A1A14;
--bk-murekkep-orta:#7A6155;
--bk-murekkep-silik:#A89386;
/* Cam reçetesi: yarı saydam yüzey + üstten ışık + sıcak gölge */
--bk-cam:rgba(255,255,255,0.58);
--bk-cam-koyu:rgba(255,255,255,0.72);
--bk-cam-kenar:rgba(255,255,255,0.75);
--bk-golge:0 10px 30px -14px rgba(120,48,28,0.34);
--bk-golge-uzak:0 22px 48px -20px rgba(120,48,28,0.42);
--bk-ic-isik:inset 0 1px 0 rgba(255,255,255,0.92);
/* Ölçü */
--bk-yaricap:22px;
--bk-yaricap-kucuk:15px;
--bk-genislik:520px;
/* Hareket — her yerde aynı yay eğrisi kullanılır */
--bk-yay:cubic-bezier(.22,1,.36,1);
--bk-hizli:.2s;
--bk-normal:.26s;
/* Zemin lekeleri (camın bulanıklaştıracağı ışık) */
--bk-leke-1:rgba(233,128,98,0.26);
--bk-leke-2:rgba(201,150,47,0.19);
--bk-leke-3:rgba(194,90,64,0.15);
}
/* --- 2. Temel ------------------------------------------------------------ */
*{box-sizing:border-box;}
body.bk{
margin:0;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
-webkit-font-smoothing:antialiased;
background:var(--bk-kagit);
color:var(--bk-murekkep);
min-height:100vh;
overflow-x:hidden;
-webkit-tap-highlight-color:transparent;
}
/* Zemin: cam ancak arkasında bir şey varsa cam görünür. Bu üç yumuşak leke
hem o derinliği verir hem sayfaya bakır sıcaklığı katar. Sabittirler;
kaydırınca kartlar üzerlerinden geçer. */
.bk-zemin{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bk-kagit);}
.bk-zemin i{position:absolute;border-radius:50%;filter:blur(70px);display:block;}
.bk-zemin i:nth-child(1){width:78vw;height:78vw;max-width:520px;max-height:520px;
top:-22vw;left:-28vw;background:var(--bk-leke-1);}
.bk-zemin i:nth-child(2){width:62vw;height:62vw;max-width:420px;max-height:420px;
top:28vh;right:-30vw;background:var(--bk-leke-2);}
.bk-zemin i:nth-child(3){width:86vw;height:86vw;max-width:560px;max-height:560px;
bottom:-28vw;left:-14vw;background:var(--bk-leke-3);}
/* Düz rengi "basılı kâğıt"a yaklaştıran ince tanecik; gradyan bantlanmasını
da gizler. */
.bk-tanecik{
position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bk-sayfa{max-width:var(--bk-genislik);margin:0 auto;padding:0 20px 56px;position:relative;}
.bk-sayfa.genis{max-width:900px;}
/* --- 3. Giriş animasyonu -------------------------------------------------- */
@keyframes bk-belir{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.bk-belir{opacity:0;animation:bk-belir .72s var(--bk-yay) forwards;}
.bk-gec-1{animation-delay:.05s;} .bk-gec-2{animation-delay:.13s;}
.bk-gec-3{animation-delay:.21s;} .bk-gec-4{animation-delay:.28s;}
.bk-gec-5{animation-delay:.34s;} .bk-gec-6{animation-delay:.40s;}
.bk-gec-7{animation-delay:.46s;} .bk-gec-8{animation-delay:.52s;}
/* --- 4. Logo -------------------------------------------------------------- */
.bk-logo{position:relative;width:74%;max-width:328px;margin:0 auto;}
.bk-logo img{display:block;width:100%;height:auto;}
/* Parıltı logonun kendisiyle maskelenir: ışık kutunun değil harflerin
içinden geçer, cilalı metal etkisi bundan gelir. Maske dosyası
--bk-maske ile verilir (krem sayfada bakır logo, koyuda beyaz). */
.bk-parilti{
position:absolute;inset:0;pointer-events:none;
-webkit-mask-image:var(--bk-maske);mask-image:var(--bk-maske);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
background:linear-gradient(112deg,transparent 40%,rgba(255,241,214,.92) 50%,transparent 60%);
background-size:280% 100%;background-repeat:no-repeat;
animation:bk-parilda 6.5s cubic-bezier(.5,0,.5,1) 1.4s infinite;
}
@keyframes bk-parilda{0%{background-position:150% 0;}38%,100%{background-position:-150% 0;}}
/* --- 5. Ayraç ------------------------------------------------------------- */
.bk-ayrac{display:flex;align-items:center;gap:12px;margin:22px 0 26px;}
.bk-ayrac::before,.bk-ayrac::after{
content:"";flex:1;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,150,47,.5),transparent);
}
.bk-ayrac span{
font-size:9px;letter-spacing:.3em;text-transform:uppercase;
color:var(--bk-murekkep-silik);
}
/* --- 6. Dokunma ---------------------------------------------------------- */
/* .bk-dokun taşıyan her öğe: imlecin/parmağın altına ışık düşer, basınca
dalga yayılır. Konum --mx/--my ile tema.js'ten gelir. */
.bk-dokun{position:relative;overflow:hidden;}
.bk-dokun::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),
rgba(233,128,98,.26),transparent 62%);
opacity:0;transition:opacity .3s;
}
.bk-dokun:hover::before{opacity:1;}
.bk-dokun>*{position:relative;z-index:1;}
.bk-dalga{
position:absolute;border-radius:50%;pointer-events:none;z-index:0;
background:radial-gradient(circle,rgba(194,90,64,.3),transparent 70%);
transform:translate(-50%,-50%) scale(0);
animation:bk-dalgalan .62s ease-out forwards;
}
@keyframes bk-dalgalan{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}
/* --- 7. Kart -------------------------------------------------------------- */
.bk-kart{
-webkit-appearance:none;appearance:none;
font-family:inherit;text-align:left;cursor:pointer;
background:var(--bk-cam);
-webkit-backdrop-filter:blur(18px) saturate(165%);
backdrop-filter:blur(18px) saturate(165%);
border:1px solid var(--bk-cam-kenar);
border-radius:var(--bk-yaricap);
padding:18px 16px;
color:var(--bk-murekkep);
display:flex;flex-direction:column;gap:13px;
box-shadow:var(--bk-golge),var(--bk-ic-isik);
transition:transform var(--bk-normal) var(--bk-yay),
box-shadow var(--bk-normal),background var(--bk-normal),
border-color var(--bk-normal);
}
.bk-kart:hover{
transform:translateY(-3px);
background:var(--bk-cam-koyu);
border-color:rgba(233,128,98,.55);
box-shadow:var(--bk-golge-uzak),var(--bk-ic-isik);
}
.bk-kart:active{transform:scale(.973);box-shadow:var(--bk-golge),var(--bk-ic-isik);}
.bk-kart.dikey{min-height:138px;}
.bk-kart.yatay{flex-direction:row;align-items:center;padding:17px 18px;}
/* --- 8. Simge ------------------------------------------------------------- */
.bk-simge{
width:46px;height:46px;flex:none;border-radius:var(--bk-yaricap-kucuk);
background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(251,229,216,.85));
border:1px solid rgba(255,255,255,.9);
box-shadow:0 6px 14px -6px rgba(156,59,40,.5),inset 0 1px 0 rgba(255,255,255,1);
display:flex;align-items:center;justify-content:center;
font-size:21px;line-height:1;
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.bk-kart:hover .bk-simge{transform:scale(1.08) rotate(-4deg);}
/* --- 9. Yazı -------------------------------------------------------------- */
.bk-baslik{
display:block;
font-family:'Fraunces',Georgia,serif;font-size:16.5px;font-weight:500;
line-height:1.18;margin-bottom:4px;letter-spacing:-.005em;
color:var(--bk-murekkep);
}
.bk-alt{display:block;font-size:11.5px;color:var(--bk-murekkep-orta);line-height:1.4;}
.bk-ok{color:var(--bk-bakir);font-size:19px;transition:transform var(--bk-normal) var(--bk-yay);}
.bk-kart:hover .bk-ok{transform:translateX(4px);}
h1.bk-h1,h2.bk-h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.01em;}
h1.bk-h1{font-size:26px;margin:0 0 6px;}
h2.bk-h2{font-size:20px;margin:0 0 6px;}
/* --- 10. Duyuru ----------------------------------------------------------- */
.bk-duyuru{
display:block;text-decoration:none;
background:linear-gradient(135deg,var(--bk-bakir) 0%,var(--bk-bakir-koyu) 100%);
border-radius:18px;padding:16px 20px;text-align:center;
box-shadow:0 16px 34px -16px rgba(156,59,40,.72),inset 0 1px 0 rgba(255,255,255,.28);
transition:transform var(--bk-hizli) var(--bk-yay);
}
.bk-duyuru::after{
content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transform:skewX(-22deg);animation:bk-sheen 4.5s ease-in-out 1s infinite;
}
@keyframes bk-sheen{0%{left:-60%;}45%,100%{left:130%;}}
.bk-duyuru:active{transform:scale(.982);}
.bk-duyuru .etiket{
display:block;margin-bottom:6px;
font-size:9px;letter-spacing:.26em;text-transform:uppercase;
color:rgba(255,236,224,.8);
}
.bk-duyuru .metin{
display:block;
font-family:'Fraunces',Georgia,serif;font-size:17.5px;font-weight:500;
color:#fff;line-height:1.28;
}
/* --- 11. Düğmeler --------------------------------------------------------- */
.bk-btn{
-webkit-appearance:none;appearance:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:9px;
font-family:inherit;font-size:11.5px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;
color:var(--bk-murekkep);
background:var(--bk-cam);
-webkit-backdrop-filter:blur(18px) saturate(165%);
backdrop-filter:blur(18px) saturate(165%);
border:1px solid var(--bk-cam-kenar);
border-radius:999px;padding:16px;width:100%;
box-shadow:var(--bk-golge),var(--bk-ic-isik);
transition:transform var(--bk-normal) var(--bk-yay),
box-shadow var(--bk-normal),border-color var(--bk-normal);
}
.bk-btn:hover{transform:translateY(-2px);border-color:rgba(233,128,98,.55);
box-shadow:var(--bk-golge-uzak),var(--bk-ic-isik);}
.bk-btn:active{transform:scale(.978);}
.bk-btn-bakir{
background:linear-gradient(135deg,var(--bk-bakir) 0%,var(--bk-bakir-koyu) 100%);
border-color:transparent;color:#fff;
box-shadow:0 14px 30px -16px rgba(156,59,40,.8),inset 0 1px 0 rgba(255,255,255,.26);
}
.bk-btn-bakir:hover{border-color:transparent;}
.bk-btn-yesil{
background:linear-gradient(135deg,#2E9E63 0%,#1C7A4A 100%);
border-color:transparent;color:#fff;
box-shadow:0 14px 30px -16px rgba(28,122,74,.8),inset 0 1px 0 rgba(255,255,255,.26);
}
.bk-btn-yesil:hover{border-color:transparent;}
/* Metin düğmesi — iptal, kapat, geri al gibi ikincil eylemler */
.bk-btn-metin{
background:none;border:none;box-shadow:none;backdrop-filter:none;
color:var(--bk-murekkep-silik);text-transform:none;letter-spacing:normal;
font-size:13px;font-weight:500;padding:10px;
}
.bk-btn-metin:hover{color:var(--bk-murekkep);transform:none;box-shadow:none;}
/* --- 12. Üst şerit (alt sayfalarda geri dönüş) ---------------------------- */
.bk-ust{
position:sticky;top:0;z-index:40;
display:flex;align-items:center;gap:14px;
padding:14px 0;margin-bottom:8px;
background:color-mix(in srgb,var(--bk-kagit) 82%,transparent);
-webkit-backdrop-filter:blur(16px) saturate(150%);
backdrop-filter:blur(16px) saturate(150%);
}
/* Geri tuşu: cam daire + bakır ok çizimi (emoji değil; her telefonda aynı görünür).
İçine