/*
Theme Name: Kamil Marketinq
Theme URI: https://example.com/
Author: Kamil Məmmədzadə
Description: Marketinq mütəxəssisi üçün şəxsi bloq və portfolyo teması. Bloqlar, Portfolyo, Haqqımda və Əlaqə bölmələri, sol paneldən tam idarəetmə.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kamil-marketinq
Tags: blog, portfolio, one-column, custom-colors, custom-menu, featured-images
*/

/* =========================================================
   1. Dəyişənlər
   ========================================================= */
:root{
  --yasil:#12372A;
  --krem:#FBF6E9;
  --narinci:#E87532;
  --ag:#FFFFFF;
  --yasil-acig:rgba(18,55,42,.72);
  --xett:rgba(18,55,42,.14);
  --kolge:0 18px 40px -24px rgba(18,55,42,.35);
  --en:1180px;
  --font:Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* =========================================================
   2. Baza
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--krem);
  color:var(--yasil);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--yasil);text-decoration:none}
a:hover{color:var(--narinci)}
h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.15;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2vw,24px)}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.2em}
:focus-visible{outline:3px solid var(--narinci);outline-offset:3px}

.qab{max-width:var(--en);margin:0 auto;padding:0 24px}
.bolme{padding:84px 0}
.bolme--dar{padding:56px 0}
.mrk{text-align:center}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;background:var(--yasil);color:#fff;padding:10px 16px;z-index:999}

/* Düymələr */
.dym{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:2px solid var(--yasil);
  background:var(--yasil);color:var(--ag);font-weight:700;font-size:15px;
  cursor:pointer;transition:.2s;
}
.dym:hover{background:var(--narinci);border-color:var(--narinci);color:#fff}
.dym--narinci{background:var(--narinci);border-color:var(--narinci);color:#fff}
.dym--narinci:hover{background:var(--yasil);border-color:var(--yasil);color:#fff}
.dym--bos{background:transparent;color:var(--yasil)}
.dym--bos:hover{background:var(--yasil);color:#fff;border-color:var(--yasil)}

.etiket{
  display:inline-block;background:var(--narinci);color:#fff;
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;
}

/* =========================================================
   3. Başlıq / naviqasiya
   ========================================================= */
.bas{
  position:sticky;top:0;z-index:80;
  background:rgba(251,246,233,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--xett);
}
.bas__ic{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.loqo{font-size:19px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.loqo img{max-height:42px;width:auto}
.loqo span{color:var(--narinci)}

.menyu{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.menyu a{
  display:block;padding:10px 16px;border-radius:999px;
  font-size:15px;font-weight:700;transition:.18s;
}
.menyu a:hover,.menyu .current-menu-item>a,.menyu .current_page_item>a{
  background:var(--yasil);color:var(--ag);
}
.menyu .dym-menu>a{background:var(--narinci);color:#fff}
.menyu .dym-menu>a:hover{background:var(--yasil)}

.acar{display:none;background:none;border:0;padding:8px;cursor:pointer}
.acar span{display:block;width:26px;height:2px;background:var(--yasil);margin:5px 0;transition:.2s}
.acar[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.acar[aria-expanded="true"] span:nth-child(2){opacity:0}
.acar[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   4. Hero (ana səhifə)
   ========================================================= */
.hero{padding:70px 0 80px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}

.hero__foto{position:relative}
.hero__foto img{
  width:100%;border-radius:20px 20px 140px 20px;
  position:relative;z-index:2;box-shadow:var(--kolge);
}
.hero__foto::before{
  content:"";position:absolute;inset:22px -22px -22px 22px;
  background:var(--yasil);border-radius:20px 20px 140px 20px;z-index:1;
}
.hero__rozet{
  position:absolute;z-index:3;right:-14px;bottom:34px;
  background:var(--narinci);color:#fff;border-radius:16px;
  padding:14px 18px;line-height:1.2;box-shadow:var(--kolge);
}
.hero__rozet b{display:block;font-size:26px}
.hero__rozet small{font-size:12px;opacity:.92}

.hero h1{margin-bottom:14px}
.hero__alt{font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--narinci);margin-bottom:18px}
.hero__metn{max-width:60ch;color:var(--yasil-acig)}
.hero__dymler{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.hero__bacariq{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:26px;border-top:1px solid var(--xett)}
.hero__bacariq span{
  background:var(--ag);border:1px solid var(--xett);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:700;
}

/* Rəqəmlər */
.reqem{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.reqem__x{background:var(--ag);border-radius:16px;padding:26px 22px;box-shadow:var(--kolge)}
.reqem__x b{display:block;font-size:38px;line-height:1;color:var(--narinci)}
.reqem__x span{font-size:14px;color:var(--yasil-acig)}

/* Loqolar */
.loqolar{background:var(--yasil);color:var(--ag)}
.loqolar h2{color:var(--ag)}
.loqolar p{color:rgba(255,255,255,.75)}
.loqo-setir{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;margin-top:34px}
.loqo-setir img{
  background:var(--ag);border-radius:12px;padding:10px;
  aspect-ratio:1/1;object-fit:contain;width:100%;
  filter:grayscale(1);opacity:.85;transition:.25s;
}
.loqo-setir img:hover{filter:none;opacity:1;transform:translateY(-4px)}

/* Xidmətlər */
.xidmet{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.xidmet__x{
  background:var(--ag);border-radius:18px;padding:30px;
  border:1px solid var(--xett);transition:.22s;
}
.xidmet__x:hover{transform:translateY(-5px);box-shadow:var(--kolge)}
.xidmet__x .ikon{
  width:48px;height:48px;border-radius:14px;background:var(--krem);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;
}
.xidmet__x p{margin:0;font-size:15px;color:var(--yasil-acig)}

/* =========================================================
   5. Bloq
   ========================================================= */
.kateqoriya{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.kateqoriya a{
  padding:10px 20px;border-radius:999px;border:1px solid var(--xett);
  background:var(--ag);font-size:14px;font-weight:700;transition:.2s;
}
.kateqoriya a:hover,.kateqoriya a.aktiv{background:var(--yasil);color:var(--ag);border-color:var(--yasil)}

.bloq-setir{display:grid;gap:28px}
.sutun-2{grid-template-columns:repeat(2,1fr)}
.sutun-3{grid-template-columns:repeat(3,1fr)}

.kart{
  background:var(--ag);border-radius:18px;overflow:hidden;
  border:1px solid var(--xett);display:flex;flex-direction:column;transition:.25s;
}
.kart:hover{transform:translateY(-6px);box-shadow:var(--kolge)}
.kart__sekil{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--yasil)}
.kart__sekil img{width:100%;height:100%;object-fit:cover;transition:.4s}
.kart:hover .kart__sekil img{transform:scale(1.06)}
.kart__kat{position:absolute;top:14px;left:14px;z-index:3}
.kart__ort{
  position:absolute;inset:0;z-index:2;
  background:rgba(18,55,42,.62);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.28s;
}
.kart:hover .kart__ort,.kart:focus-within .kart__ort{opacity:1}
.kart__oxu{
  background:var(--narinci);color:#fff;border-radius:999px;
  padding:12px 30px;font-weight:700;font-size:15px;
  transform:translateY(10px);transition:.28s;
}
.kart:hover .kart__oxu{transform:none}
.kart__metn{padding:22px;display:flex;flex-direction:column;flex:1}
.kart__metn h3{margin-bottom:8px;font-size:20px}
.kart__tarix{font-size:13px;color:var(--yasil-acig);margin-bottom:10px}
.kart__metn p{font-size:15px;color:var(--yasil-acig);margin-bottom:16px}
.kart__link{margin-top:auto;font-weight:700;color:var(--narinci);font-size:15px}

/* Səhifələmə */
.sehifeleme{display:flex;justify-content:center;gap:8px;margin-top:50px}
.sehifeleme .page-numbers{
  padding:10px 16px;border-radius:10px;background:var(--ag);
  border:1px solid var(--xett);font-weight:700;font-size:15px;
}
.sehifeleme .current,.sehifeleme .page-numbers:hover{background:var(--yasil);color:var(--ag)}

/* =========================================================
   6. Tək yazı
   ========================================================= */
.yazi-bas{padding:56px 0 34px;text-align:center}
.yazi-bas .meta{color:var(--yasil-acig);font-size:14px;margin-bottom:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.yazi-sekil{max-width:960px;margin:0 auto 44px;border-radius:20px;overflow:hidden}
.yazi-metn{max-width:74ch;margin:0 auto;font-size:18px}
.yazi-metn h2,.yazi-metn h3{margin-top:1.6em}
.yazi-metn img{border-radius:14px;margin:1.4em 0}
.yazi-metn blockquote{
  margin:1.6em 0;padding:18px 26px;background:var(--ag);
  border-left:4px solid var(--narinci);border-radius:0 14px 14px 0;
}
.paylas{max-width:74ch;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--xett);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.paylas a{background:var(--ag);border:1px solid var(--xett);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700}

/* =========================================================
   7. Portfolyo
   ========================================================= */
.pf-setir{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pf-x{
  position:relative;border-radius:16px;overflow:hidden;background:var(--ag);
  border:1px solid var(--xett);
}
.pf-x img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:.35s;cursor:zoom-in}
.pf-x:hover img{transform:scale(1.05)}
.pf-x__ad{
  position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(transparent,rgba(18,55,42,.9));
  color:#fff;font-weight:700;font-size:15px;opacity:0;transition:.25s;
}
.pf-x:hover .pf-x__ad{opacity:1}

.pf-link{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pf-link a{
  background:var(--ag);border:1px solid var(--xett);border-radius:12px;
  padding:14px 18px;font-size:14px;font-weight:700;display:flex;
  align-items:center;justify-content:space-between;gap:10px;transition:.2s;
}
.pf-link a:hover{background:var(--yasil);color:#fff;border-color:var(--yasil)}
.pf-link a::after{content:"↗";opacity:.6}

/* Lightbox */
.isiq{
  position:fixed;inset:0;background:rgba(18,55,42,.94);z-index:200;
  display:none;align-items:center;justify-content:center;padding:30px;
}
.isiq.acig{display:flex}
.isiq img{max-width:min(92vw,900px);max-height:88vh;border-radius:12px;width:auto}
.isiq__bagla{
  position:absolute;top:20px;right:26px;background:none;border:0;
  color:#fff;font-size:38px;cursor:pointer;line-height:1;
}

/* =========================================================
   8. Haqqımda
   ========================================================= */
.haq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.haq__foto img{border-radius:20px;box-shadow:var(--kolge);width:100%}
.tecrube{list-style:none;padding:0;margin:0}
.tecrube li{
  background:var(--ag);border:1px solid var(--xett);border-radius:16px;
  padding:22px 24px;margin-bottom:14px;
}
.tecrube h3{margin-bottom:4px;font-size:19px}
.tecrube .il{color:var(--narinci);font-weight:700;font-size:14px;margin-bottom:8px}
.tecrube p{margin:0;font-size:15px;color:var(--yasil-acig)}

.bacariq-x{margin-bottom:18px}
.bacariq-x .ust{display:flex;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:7px}
.bacariq-x .zol{height:9px;background:var(--ag);border-radius:999px;overflow:hidden;border:1px solid var(--xett)}
.bacariq-x .zol i{display:block;height:100%;background:var(--narinci);border-radius:999px}

/* =========================================================
   9. Əlaqə
   ========================================================= */
.elaqe{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.elaqe-x{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.elaqe-x .ikon{
  width:44px;height:44px;border-radius:12px;background:var(--yasil);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 44px;font-size:18px;
}
.elaqe-x b{display:block;font-size:14px;color:var(--yasil-acig);font-weight:400}
.forma{background:var(--ag);border:1px solid var(--xett);border-radius:20px;padding:32px}
.forma label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.forma input,.forma textarea,.forma select{
  width:100%;padding:13px 16px;border:1px solid var(--xett);border-radius:12px;
  font-family:var(--font);font-size:15px;background:var(--krem);margin-bottom:18px;color:var(--yasil);
}
.forma textarea{min-height:140px;resize:vertical}
.forma input:focus,.forma textarea:focus{outline:none;border-color:var(--narinci)}
.mesaj-ok{background:#e7f4ec;border:1px solid #b6ddc6;color:#14603c;padding:14px 18px;border-radius:12px;margin-bottom:20px;font-weight:700}
.mesaj-xeta{background:#fdecea;border:1px solid #f5c2bd;color:#a12b1c;padding:14px 18px;border-radius:12px;margin-bottom:20px;font-weight:700}

/* =========================================================
   10. CTA + Alt hissə
   ========================================================= */
.cta{background:var(--narinci);color:#fff;border-radius:24px;padding:56px 44px;text-align:center}
.cta h2{color:#fff}
.cta p{max-width:56ch;margin:0 auto 26px;color:rgba(255,255,255,.9)}
.cta .dym{background:var(--ag);color:var(--yasil);border-color:var(--ag)}
.cta .dym:hover{background:var(--yasil);color:#fff;border-color:var(--yasil)}

.alt{background:var(--yasil);color:rgba(255,255,255,.78);padding:56px 0 26px;margin-top:80px}
.alt a{color:rgba(255,255,255,.78)}
.alt a:hover{color:var(--narinci)}
.alt__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
.alt h4{color:#fff;font-size:16px;margin-bottom:14px}
.alt ul{list-style:none;padding:0;margin:0}
.alt li{margin-bottom:9px;font-size:15px}
.alt__sosial{display:flex;gap:10px;margin-top:16px}
.alt__sosial a{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.alt__sosial a:hover{background:var(--narinci);border-color:var(--narinci);color:#fff}
.alt__son{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:14px;text-align:center}

/* Səhifə başlığı */
.seh-bas{background:var(--yasil);color:#fff;padding:64px 0;text-align:center}
.seh-bas h1{color:#fff;margin-bottom:10px}
.seh-bas p{color:rgba(255,255,255,.75);max-width:62ch;margin:0 auto}

/* =========================================================
   11. Adaptiv
   ========================================================= */
@media(max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__foto{max-width:420px}
  .loqo-setir{grid-template-columns:repeat(4,1fr)}
  .xidmet,.sutun-3,.pf-setir,.pf-link{grid-template-columns:repeat(2,1fr)}
  .haq,.elaqe{grid-template-columns:1fr;gap:36px}
  .alt__grid{grid-template-columns:1fr 1fr}
  .reqem{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  body{font-size:16px}
  .bolme{padding:56px 0}
  .acar{display:block}
  .menyu{
    position:absolute;top:74px;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--krem);padding:16px 24px 24px;
    border-bottom:1px solid var(--xett);box-shadow:var(--kolge);
  }
  .menyu.acig{display:flex}
  .sutun-2,.sutun-3,.xidmet,.pf-setir,.pf-link,.alt__grid,.reqem{grid-template-columns:1fr}
  .hero__foto::before{inset:16px -16px -16px 16px}
  .cta{padding:40px 24px}
}