/* =========================================================================
cgv2-theme-taki.css — TAKI / AKSESUAR
-------------------------------------------------------------------------
YÜKLEME SIRASI: bootstrap → style.css → cgv2.css → BU DOSYA
GÖVDE SINIFI:
FONT (master içine):
TASARIM YÖNÜ
Takıda satın alma kararı duygusaldır ve ürün küçüktür. İki sonuç doğurur:
1) Görsel büyük olmalı, kalabalık olmamalı → boşluk burada süs değil, işlev.
2) Arayüz geri çekilmeli → ince çizgiler, düşük kontrast, sessiz renk.
Bu yüzden diğer temaların aksine kalın harf, dolgu renk ve rozet YOK denecek
kadar az. Ürün konuşsun diye tasarım susuyor.
========================================================================= */
body.t-taki{
--cg-brand:#A8834E; /* soluk altın — parlak sarı ucuz görünür */
--cg-brand-d:#8A6A3A;
--cg-brand-l:#F6F0E6;
--cg-brand-glow:rgba(168,131,78,.22);
--cg-ink:#1E1B18; /* sıcak siyah */
--cg-ink-2:#6A625A;
--cg-ink-3:#9E958B;
--cg-cream:#FBF9F6; /* fildişi */
--cg-cream-2:#F2EDE6;
--cg-line:#E8E1D7;
--cg-r-xs:2px; --cg-r-sm:4px; --cg-r:6px; --cg-r-lg:10px;
--cg-f-display:"Cormorant Garamond","Georgia",serif;
--cg-f-body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
background:#fff;
font-size:15.5px;
letter-spacing:.01em;
}
/* ---------------- TİPOGRAFİ ----------------
Cormorant yüksek kontrastlı bir serif; büyük puntoda zarif, küçükte okunmaz.
Bu yüzden yalnızca başlıklarda ve fiyatta; gövde Jost ile ince ve ferah. */
body.t-taki h1,body.t-taki h2,body.t-taki h3,body.t-taki h4{
font-family:var(--cg-f-display);font-weight:500;letter-spacing:.005em;line-height:1.2;
}
body.t-taki h1{font-size:clamp(1.9rem,4vw,3rem)}
body.t-taki h2{font-size:clamp(1.5rem,3vw,2.3rem)}
body.t-taki h3{font-size:clamp(1.1rem,1.8vw,1.35rem)}
body.t-taki .cg-eyebrow{
font-family:var(--cg-f-body);font-weight:400;font-size:.7rem;letter-spacing:.28em;
color:var(--cg-ink-3);
}
body.t-taki .cg-eyebrow::before{width:18px;height:1px;background:var(--cg-ink-3)}
/* ---------------- BAŞLIK ---------------- */
body.t-taki .cg-topbar{background:var(--cg-ink);font-size:.75rem;letter-spacing:.06em}
body.t-taki .cg-topbar__track{background:transparent;border:1px solid rgba(255,255,255,.28);font-weight:400}
body.t-taki .cg-topbar__track:hover{background:rgba(255,255,255,.1)}
body.t-taki .cg-head{border-bottom:1px solid var(--cg-line)}
body.t-taki .cg-head__in{min-height:88px}
body.t-taki .cg-search input{
border-radius:0;border-width:0 0 1px 0;background:transparent;height:42px;padding-left:0;
font-weight:300;letter-spacing:.04em;
}
body.t-taki .cg-search input:focus{box-shadow:none;border-bottom-color:var(--cg-brand)}
body.t-taki .cg-search button{background:transparent;color:var(--cg-ink);width:30px;height:30px;top:6px}
body.t-taki .cg-search button:hover{background:transparent;color:var(--cg-brand)}
body.t-taki .cg-nav a{
font-size:.82rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
border-radius:0;padding:9px 15px;color:var(--cg-ink-2);
}
body.t-taki .cg-nav a:hover{background:transparent;color:var(--cg-brand-d)}
body.t-taki .cg-nav a.is-active{background:transparent;color:var(--cg-ink);border-bottom:1px solid var(--cg-brand)}
/* ---------------- BUTON ----------------
Dolgu yerine ince çerçeve: takıda "bas bana" diye bağıran buton ucuzlatır. */
body.t-taki .cg-btn{
border-radius:0;font-family:var(--cg-f-body);font-weight:400;font-size:.78rem;
letter-spacing:.18em;text-transform:uppercase;padding:14px 30px;
background:var(--cg-ink);border-color:var(--cg-ink);
}
body.t-taki .cg-btn:hover{background:var(--cg-brand-d);border-color:var(--cg-brand-d);box-shadow:none;transform:none}
body.t-taki .cg-btn--ghost{background:transparent;border-color:var(--cg-ink);color:var(--cg-ink)}
body.t-taki .cg-btn--ghost:hover{background:var(--cg-ink);color:#fff}
body.t-taki .cg-chip,body.t-taki .cg-pill{border-radius:0;letter-spacing:.1em;font-weight:400}
/* ---------------- ÜRÜN KARTI ----------------
Çerçeve ve gölge yok. Kartlar arasındaki boşluk kart sınırının kendisi. */
body.t-taki .cg-grid{gap:clamp(18px,2.6vw,36px)}
body.t-taki .cg-card{border:0;border-radius:0;background:transparent}
body.t-taki .cg-card:hover{transform:none;box-shadow:none;border-color:transparent}
body.t-taki .cg-card__media{
aspect-ratio:4/5;background:var(--cg-cream);border-radius:0;
}
@supports not (aspect-ratio:4/5){ body.t-taki .cg-card__media{padding-top:125%} }
body.t-taki .cg-card__media img{object-fit:cover;transition:transform .8s cubic-bezier(.2,0,.2,1)}
body.t-taki .cg-card:hover .cg-card__media img{transform:scale(1.05)}
body.t-taki .cg-card__body{padding:14px 2px 0;text-align:center}
body.t-taki .cg-card__brand{
justify-content:center;font-size:.65rem;font-weight:400;letter-spacing:.2em;
color:var(--cg-ink-3);margin-bottom:6px;
}
body.t-taki .cg-card__title{
font-family:var(--cg-f-body);font-size:.88rem;font-weight:300;letter-spacing:.03em;
color:var(--cg-ink);height:2.7em;line-height:1.5;
}
body.t-taki .cg-price{border-top:0;padding-top:2px}
body.t-taki .cg-price__row{justify-content:center}
body.t-taki .cg-price__now{
font-family:var(--cg-f-display);font-weight:500;font-size:1.15rem;letter-spacing:.02em;
}
body.t-taki .cg-price__cur{font-family:var(--cg-f-body);font-weight:300;font-size:.8rem}
/* rozetler: yalnızca gerçekten gerekliyse, sessiz */
body.t-taki .cg-badge{
border-radius:0;font-family:var(--cg-f-body);font-weight:400;font-size:.6rem;
letter-spacing:.16em;box-shadow:none;background:rgba(30,27,24,.82);
}
body.t-taki .cg-badge--sale{background:var(--cg-brand)}
body.t-taki .cg-badge--fast{display:none} /* takıda "hızlı teslimat" rozeti gürültüdür */
/* ---------------- TAKI: MALZEME ETİKETLERİ ----------------
925 Ayar GümüşRodyum KaplamaZirkon Taş
*/
.tt-specs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.tt-specs span{
font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cg-ink-3);
border:1px solid var(--cg-line);padding:4px 9px;
}
/* hediye kutusu / sertifika şeridi */
.tt-note{
display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
border-top:1px solid var(--cg-line);border-bottom:1px solid var(--cg-line);
padding:18px;margin:28px 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--cg-ink-2);text-align:center;
}
.tt-note svg{width:16px;height:16px;color:var(--cg-brand);flex:none}
.tt-note span{display:inline-flex;align-items:center;gap:8px}
.tt-note span + span::before{content:"·";margin-right:10px;color:var(--cg-ink-3)}
/* ---------------- LİSTE / GÜVEN / FOOTER ---------------- */
body.t-taki .cg-listbar{
background:transparent;border:0;border-bottom:1px solid var(--cg-line);
border-radius:0;padding:0 0 18px;text-align:center;justify-content:center;
}
body.t-taki .cg-listbar h1{font-size:clamp(1.5rem,3vw,2.2rem)}
body.t-taki .cg-trust{border:0;border-radius:0;background:transparent;gap:0}
body.t-taki .cg-trust__item{border:0;background:transparent;justify-content:center;text-align:left}
body.t-taki .cg-trust__ico{background:transparent;color:var(--cg-brand);border:1px solid var(--cg-line);border-radius:50%}
body.t-taki .cg-trust__txt strong{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.76rem}
body.t-taki .cg-foot{background:var(--cg-ink);border-top:0}
body.t-taki .cg-foot h3{font-family:var(--cg-f-body);font-weight:400;letter-spacing:.2em;font-size:.72rem}
body.t-taki .cg-foot h3::after{display:none}
body.t-taki .cg-soc a{border-radius:50%}
@media (max-width:620px){
body.t-taki .cg-grid{gap:14px}
body.t-taki .cg-card__body{padding-top:10px}
.tt-note{flex-direction:column;gap:8px}
.tt-note span + span::before{display:none}
}