/*
Theme Name: Cilt & Makyaj
Theme URI: https://ciltvemakyaj.com
Author: ciltvemakyaj
Description: Hızlı, modern editorial güzellik teması. Builder yok, full-page cache dostu. Cilt bakımı, makyaj ve doğal güzellik içerikleri için.
Version: 1.0
Text Domain: ciltvemakyaj
*/

:root{
  --cream:#FAF4EC; --cream-2:#F3E9DD; --ink:#2A1B26; --ink-soft:#5A4A54;
  --clay:#C06B5A; --clay-deep:#A4503F; --rose:#E7B7AD; --gold:#B68A4E;
  --line:#E2D4C4; --white:#FFFDFA;
  --serif:'Fraunces',Georgia,serif; --sans:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-9999px}

/* TOP BAR */
.topbar{background:var(--ink);color:var(--cream);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{opacity:.8;transition:opacity .2s}.topbar a:hover{opacity:1}
.topbar .dot{color:var(--rose);margin:0 10px}

/* HEADER */
.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:-.01em;line-height:1}
.brand span{color:var(--clay);font-style:italic}
.brand small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-top:5px}
nav.main ul{display:flex;gap:30px;list-style:none;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
nav.main a{position:relative;padding:6px 0;display:block;transition:color .2s}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--clay);transition:width .25s}
nav.main a:hover{color:var(--clay-deep)} nav.main a:hover::after{width:100%}
.hd-tools{display:flex;align-items:center;gap:18px}
.search-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--white);cursor:pointer;transition:.2s;font-size:15px}
.search-btn:hover{border-color:var(--clay);color:var(--clay)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);display:block}

/* HERO */
.hero{padding:54px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:40px}
.feat{position:relative;border-radius:18px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end;box-shadow:0 30px 60px -30px rgba(42,27,38,.5);background:var(--cream-2)}
.feat .feat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,27,38,0) 30%,rgba(42,27,38,.82) 100%)}
.feat .pad{padding:42px;color:var(--cream);position:relative;z-index:2}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--clay);color:#fff;padding:7px 14px;border-radius:100px;margin-bottom:18px}
.feat h1,.feat h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.015em;max-width:90%}
.feat .meta{margin-top:16px;font-size:13px;letter-spacing:.05em;opacity:.85;text-transform:uppercase}
.side{display:flex;flex-direction:column;gap:22px}
.s-card{display:flex;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line);align-items:flex-start}
.s-card:last-child{border-bottom:0}
.s-num{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--rose);line-height:1;min-width:42px}
.s-card .ct{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-deep)}
.s-card h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.2;margin-top:6px;transition:color .2s}
.s-card:hover h3{color:var(--clay)}

/* SECTION HEAD */
.sec{padding:30px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:32px}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:-.01em}
.sec-head h2 b{color:var(--clay);font-weight:500;font-style:italic}
.sec-head .more{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);transition:.2s;white-space:nowrap}
.sec-head .more:hover{color:var(--clay)}

/* ARTICLE GRID */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card .thumb{border-radius:14px;overflow:hidden;aspect-ratio:4/3;margin-bottom:16px;background:var(--cream-2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.06)}
.card .ct{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--clay-deep)}
.card h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.22;margin:8px 0 10px;transition:color .2s}
.card:hover h3{color:var(--clay)}
.card p{color:var(--ink-soft);font-size:15px;line-height:1.55}
.card .rd{margin-top:12px;font-size:12.5px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase}

/* INGREDIENT BAND */
.band{background:var(--ink);color:var(--cream);border-radius:22px;padding:54px;margin:54px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--clay) 0%,transparent 70%);opacity:.35}
.band .lbl{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.band h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.08;margin:12px 0 8px;max-width:620px}
.band p{color:rgba(250,244,236,.75);max-width:560px}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;position:relative;z-index:2}
.chip{border:1px solid rgba(231,183,173,.4);color:var(--cream);padding:10px 20px;border-radius:100px;font-weight:600;font-size:14px;transition:.22s}
.chip:hover{background:var(--clay);border-color:var(--clay);transform:translateY(-2px)}

/* AD SLOT */
.ad{background:var(--cream-2);border:1px dashed var(--line);border-radius:12px;min-height:120px;display:grid;place-items:center;color:#b9a892;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:40px 0;overflow:hidden}
.ad ins{display:block}

/* CATEGORY TILES */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff;box-shadow:0 18px 36px -22px rgba(42,27,38,.55);background:var(--ink)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(42,27,38,.85))}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover img{transform:scale(1.07)}
.cat .ci{position:relative;z-index:2;padding:22px}
.cat .ci small{font-size:11px;letter-spacing:.18em;opacity:.8;text-transform:uppercase}
.cat .ci h3{font-family:var(--serif);font-weight:500;font-size:23px;margin-top:4px}

/* NEWSLETTER */
.news{background:var(--cream-2);border-radius:22px;padding:56px;text-align:center;margin:60px 0;border:1px solid var(--line)}
.news .lbl{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-deep)}
.news h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px);margin:12px 0 10px}
.news p{color:var(--ink-soft);max-width:460px;margin:0 auto 26px}
.nf{display:flex;gap:10px;max-width:440px;margin:0 auto}
.nf input{flex:1;padding:15px 18px;border:1px solid var(--line);border-radius:100px;font-family:var(--sans);font-size:15px;background:var(--white)}
.nf input:focus{outline:none;border-color:var(--clay)}
.nf button{background:var(--ink);color:var(--cream);border:0;padding:15px 28px;border-radius:100px;font-weight:700;font-family:var(--sans);cursor:pointer;letter-spacing:.04em;transition:.2s}
.nf button:hover{background:var(--clay-deep)}

/* ===== SINGLE / ARTICLE ===== */
.article-hd{max-width:780px;margin:48px auto 0;text-align:center}
.article-hd .ct{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-deep)}
.article-hd h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.02em;margin:16px 0 14px}
.article-hd .meta{color:var(--ink-soft);font-size:14px;letter-spacing:.04em}
.article-hero{max-width:1040px;margin:36px auto 0;border-radius:18px;overflow:hidden;aspect-ratio:16/8;background:var(--cream-2)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.entry{max-width:720px;margin:0 auto;padding:46px 0}
.entry p{margin:0 0 24px;font-size:18.5px;line-height:1.78}
.entry h2{font-family:var(--serif);font-weight:600;font-size:30px;margin:44px 0 16px;letter-spacing:-.01em}
.entry h3{font-family:var(--serif);font-weight:600;font-size:23px;margin:34px 0 12px}
.entry ul,.entry ol{margin:0 0 24px 22px}.entry li{margin-bottom:10px;line-height:1.7}
.entry img{border-radius:12px;margin:30px 0}
.entry a{color:var(--clay-deep);text-decoration:underline;text-underline-offset:3px}
.entry blockquote{border-left:3px solid var(--clay);background:var(--cream-2);padding:22px 26px;border-radius:0 12px 12px 0;margin:30px 0;font-family:var(--serif);font-size:21px;font-style:italic;line-height:1.5}
.entry strong{font-weight:700}
.share{max-width:720px;margin:0 auto 40px;display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.share span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.share a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.2s}
.share a:hover{background:var(--clay);color:#fff;border-color:var(--clay)}

/* ARCHIVE HEAD */
.arch-hd{text-align:center;padding:56px 0 10px}
.arch-hd small{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--clay-deep)}
.arch-hd h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4vw,52px);margin:12px 0 8px}
.arch-hd p{color:var(--ink-soft);max-width:560px;margin:0 auto}

/* PAGINATION */
.pagination{display:flex;gap:8px;justify-content:center;margin:40px 0 10px;flex-wrap:wrap}
.pagination .page-numbers{min-width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-weight:600;background:var(--white);transition:.2s;padding:0 14px}
.pagination .current,.pagination .page-numbers:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* FOOTER */
.site-footer{background:var(--ink);color:var(--cream);padding:64px 0 30px;margin-top:40px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(250,244,236,.14)}
.site-footer .brand{color:var(--cream)} .site-footer .brand small{color:var(--rose)}
.fcol h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:18px}
.fcol a{display:block;color:rgba(250,244,236,.78);padding:7px 0;font-size:15px;transition:.2s}
.fcol a:hover{color:#fff;padding-left:5px}
.fcol p{color:rgba(250,244,236,.7);font-size:15px;margin-top:14px;max-width:330px}
.fbot{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;color:rgba(250,244,236,.6);letter-spacing:.04em;flex-wrap:wrap;gap:10px}

/* LOAD ANIM */
.rise{opacity:0;transform:translateY(22px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
@media(prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}

/* RESPONSIVE */
@media(max-width:900px){
  nav.main,.hd-tools .search-btn{display:none}
  .burger{display:flex}
  nav.main.open ul{display:flex;position:absolute;top:88px;left:0;right:0;flex-direction:column;background:var(--cream);padding:24px;border-bottom:1px solid var(--line);gap:4px}
  .hero-grid{grid-template-columns:1fr}.feat{min-height:420px}
  .grid,.grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .band,.news{padding:36px 24px}
}
@media(max-width:560px){
  body{font-size:16px}
  .grid,.grid.cols-2,.cats,.fgrid{grid-template-columns:1fr}
  .nf{flex-direction:column}.nf button{width:100%}
  .brand{font-size:25px}
  .entry p{font-size:17.5px}
}