/* SANATLA — temel katman: jetonlar, tipografi, konteyner, bölüm, buton, animasyon.
   Ölçüler kaynak Avada kurulumundan birebir alındı (bkz. /root/sanatla-web/ANALIZ.md).
   Bileşene özel kurallar components.css içinde. */

:root{
  --snt-t1-size:48px; --snt-t1-lh:1.3;  --snt-t1-w:700;              /* Başlıklar   */
  --snt-t2-size:20px; --snt-t2-lh:1.6;  --snt-t2-w:400;              /* Alt başlık  */
  --snt-t3-size:17px; --snt-t3-lh:1.2;  --snt-t3-ls:0.015em;         /* Lead/menü   */
  --snt-t4-size:17px; --snt-t4-lh:1.72; --snt-t4-ls:0.015em;         /* Gövde       */
  --snt-t5-size:14px; --snt-t5-lh:1.72; --snt-t5-ls:0.015em;         /* Küçük       */
  --snt-pad:7%;
}

.site-sanatla{font-family:var(--kreatus-font-body);font-size:var(--snt-t4-size);line-height:var(--snt-t4-lh);
  letter-spacing:var(--snt-t4-ls);color:var(--kreatus-text);background:var(--kreatus-background)}

.snt-container{width:100%;max-width:var(--kreatus-container);margin:0 auto;padding-inline:var(--kreatus-gutter)}
.snt-container--narrow{max-width:860px}

/* --- tipografi (düşük özgüllük: bileşen sınıfları ezebilsin) --- */
:where(.site-sanatla h1,.site-sanatla .snt-h1){font-family:var(--kreatus-font-heading);font-size:var(--snt-t1-size);
  line-height:var(--snt-t1-lh);font-weight:var(--snt-t1-w);color:var(--kreatus-text-strong);margin:0 0 .4em}
:where(.site-sanatla h2,.site-sanatla .snt-h2){font-family:var(--kreatus-font-heading);font-size:36px;line-height:1.4;font-weight:700;color:var(--kreatus-text-strong);margin:0 0 .5em}
:where(.site-sanatla h3){font-size:28px;line-height:1.3;font-weight:700;margin:0 0 .5em}
:where(.site-sanatla h4){font-size:22px;line-height:1.6;font-weight:700;margin:1.33em 0 .5em}
:where(.site-sanatla h5){font-size:18px;line-height:1.6;font-weight:700;margin:1.67em 0 .5em}
:where(.site-sanatla h6){font-size:16px;line-height:1.6;font-weight:700;margin:2.33em 0 .5em}
:where(.site-sanatla p){margin:0 0 1.2em}
:where(.site-sanatla a){color:var(--kreatus-primary);text-decoration:none}
:where(.site-sanatla a:hover){text-decoration:underline}
:where(.site-sanatla strong,.site-sanatla b){font-weight:700}
.snt-kicker{display:block;font-size:var(--snt-t5-size);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--kreatus-primary);margin-bottom:.6em}
.snt-lead{font-size:var(--snt-t2-size);line-height:var(--snt-t2-lh);color:var(--kreatus-text-light)}
.snt-small{font-size:var(--snt-t5-size);line-height:var(--snt-t5-lh);color:var(--kreatus-text-light)}

/* --- bölüm --- */
.snt-section{position:relative}
.snt-pad--normal{padding-block:var(--snt-pad)}
.snt-pad--kucuk{padding-block:4%}
.snt-pad--buyuk{padding-block:10%}
.snt-pad--yok{padding-block:0}
.snt-section--white{background:var(--kreatus-background)}
.snt-section--soft{background:var(--kreatus-background-alt)}
.snt-section--tint{background:var(--kreatus-primary-tint)}
.snt-section--peach{background:var(--kreatus-peach)}
.snt-section--lilac{background:var(--kreatus-lilac)}
.snt-section--dark{background:var(--kreatus-text-strong)}
.snt-section--purple{background:var(--kreatus-primary)}
.snt-section--none{background:transparent}
.snt-on-dark{color:#fff}
.snt-on-dark :where(h1,h2,h3,h4,h5,h6,.snt-h1,.snt-h2){color:#fff}
.snt-on-dark .snt-lead,.snt-on-dark .snt-small{color:rgba(255,255,255,.82)}
.snt-on-dark .snt-kicker{color:var(--kreatus-secondary)}

.snt-intro{margin-bottom:2.2em}
.snt-intro--center{text-align:center;margin-inline:auto;max-width:820px}
.snt-intro--right{text-align:right}

/* --- buton (kaynak dolgusu 11px 23px, büyük varyant 16px) --- */
.snt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:11px 23px;
  border-radius:var(--kreatus-radius);font-size:var(--snt-t3-size);line-height:var(--snt-t3-lh);
  letter-spacing:var(--snt-t3-ls);font-weight:500;text-decoration:none;border:1px solid transparent;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.snt-btn:hover{text-decoration:none;transform:translateY(-1px)}
.snt-btn--purple{background:var(--kreatus-primary);color:#fff}
.snt-btn--purple:hover{background:var(--kreatus-primary-dark);color:#fff}
.snt-btn--orange{background:var(--kreatus-secondary);color:#fff}
.snt-btn--orange:hover{background:#e8760c;color:#fff}
.snt-btn--outline{border-color:var(--kreatus-primary);color:var(--kreatus-primary);background:transparent}
.snt-btn--outline:hover{background:var(--kreatus-primary);color:#fff}
.snt-btn--outline-white{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.snt-btn--outline-white:hover{background:#fff;color:var(--kreatus-text-strong)}
.snt-btn--ghost{background:var(--kreatus-background-alt);color:var(--kreatus-text)}
.snt-btn--ghost:hover{background:var(--kreatus-border)}
.snt-btn--buyuk{padding:16px 28px}

/* --- kart --- */
.snt-card{display:flex;flex-direction:column;background:var(--kreatus-background);border-radius:var(--kreatus-radius);overflow:hidden}
.snt-card__media{display:block;aspect-ratio:16/10;overflow:hidden}
.snt-card__img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.snt-card:hover .snt-card__img{transform:scale(1.04)}
.snt-card__body{padding:18px 4px 4px}
.snt-card__title{font-size:18px;line-height:1.45;font-weight:700;margin:0 0 .5em}
.snt-card__title a{color:var(--kreatus-text-strong)}
.snt-card__title a:hover{color:var(--kreatus-primary);text-decoration:none}
.snt-card__excerpt{font-size:var(--snt-t5-size);line-height:var(--snt-t5-lh);color:var(--kreatus-text-light);margin:0 0 .7em}
.snt-card__date{font-size:13px;color:var(--kreatus-text-light)}

/* --- ızgara --- */
.snt-grid{display:grid;gap:26px}
.snt-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.snt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.snt-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.snt-grid>*{min-width:0}

/* --- animasyon: kaydırmayla beliren solma (Avada fade karşılığı) ---
   Süre ve gecikme öğe başına --snt-dur / --snt-delay ile verilir.
   JS yoksa ya da hareket azaltma açıksa içerik doğrudan görünür. */
.snt-anim{--snt-dur:.4s;--snt-delay:0s}
.js .snt-anim{opacity:0;will-change:opacity,transform;
  transition:opacity var(--snt-dur) ease,transform var(--snt-dur) ease;transition-delay:var(--snt-delay)}
.js .snt-anim--up{transform:translateY(28px)}
.js .snt-anim--down{transform:translateY(-28px)}
.js .snt-anim--left{transform:translateX(-28px)}
.js .snt-anim--right{transform:translateX(28px)}
.js .snt-anim.is-in{opacity:1;transform:none}
.js .snt-anim.no-anim{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  .js .snt-anim{opacity:1!important;transform:none!important;transition:none!important}
  .snt-card__img{transition:none}
}

/* --- mobil --- */
@media(max-width:900px){
  :root{--snt-t1-size:34px}
  :where(.site-sanatla h2,.site-sanatla .snt-h2){font-size:27px}
  :where(.site-sanatla h3){font-size:22px}
  .snt-grid--3,.snt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .snt-pad--normal{padding-block:44px}
  .snt-pad--buyuk{padding-block:60px}
  .snt-pad--kucuk{padding-block:30px}
}
@media(max-width:640px){
  :root{--snt-t1-size:30px}
  .snt-grid--2,.snt-grid--3,.snt-grid--4{grid-template-columns:1fr}
  .snt-container{padding-inline:20px}
}